Switch
A control that turns a setting on or off.
<Label> <Switch /> Airplane Mode</Label>Installation
$ npx shadcn@latest add @constella/switchUsage
import { Switch } from "@/components/primitives/switch";<Switch />Size
Use the size prop to change the size of the switch.
| Size | Track | Thumb |
|---|---|---|
sm | 24 × 14 | 12 |
default | 32 × 18 | 16 |
lg | 40 × 22 | 20 |
<Switch size="sm" />Description
Put the label and description in a FieldContent, and the switch after it in a horizontal Field.
Focus is shared across devices, and turns off when you leave the app.
<Field orientation="horizontal"> <FieldContent> <FieldLabel>Share across devices</FieldLabel> <FieldDescription> Focus is shared across devices, and turns off when you leave the app. </FieldDescription> </FieldContent> <Switch /></Field>Choice Card
Put the content and the switch inside a FieldLabel to make the whole card toggle it.
<Field> <FieldLabel> <FieldContent> <FieldTitle>Enable notifications</FieldTitle> <FieldDescription> Receive notifications when focus mode is enabled or disabled. </FieldDescription> </FieldContent> <Switch defaultChecked /> </FieldLabel></Field>Disabled
Add disabled to the Field, so the switch and its label fade together.
<Field disabled orientation="horizontal"> <Switch /> <FieldLabel>Disabled</FieldLabel></Field>Invalid
Add invalid to the Field, so the switch takes the red edge.
You must accept the terms and conditions to continue.
<Field invalid orientation="horizontal"> <FieldContent> <FieldLabel>Accept terms and conditions</FieldLabel> <FieldDescription> You must accept the terms and conditions to continue. </FieldDescription> </FieldContent> <Switch /></Field>API Reference
Switch takes size ("sm" or "default") and sx, applied last. For the rest, see Base UI Switch.