Switch

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

Installation


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

import { Switch } from '@/ui/switch';

<Switch />

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.