Switch

A control that allows the user to toggle between checked and not checked.

Installation


pnpm dlx shadcn@latest add @force-ui-vue/switch

<script setup lang="ts">
import { Switch } from "@/components/ui/switch"
</script>
 
<template>
  <Switch />
</template>

Card-style selection where FieldLabel wraps the entire Field for a clickable card pattern.

Add the disabled prop to the Switch component to disable the switch. Add the data-disabled prop to the Field component for styling.

Add the aria-invalid prop to the Switch component to indicate an invalid state. Add the data-invalid prop to the Field component for styling.

Use the size prop to change the size of the switch.

See the Radix Switch documentation.

On This Page

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.