Shadcn Switch
React switch for dark mode, notifications, and feature flags. Built with TypeScript and Tailwind CSS for Next.js using Base UI — checked or unchecked, sm or default.
A switch is instant on or off. Flip it and the setting applies now — dark mode, notifications, a feature flag. If the choice should wait for submit, that is a Checkbox.
Looking for a neobrutalism version for shadcn?
Same switch, thicker borders. The NeoBrutalism switch is the kit if you want that look.
Usage
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"<div className="flex items-center gap-2">
<Switch id="airplane-mode" />
<Label htmlFor="airplane-mode">Offline mode</Label>
</div>defaultChecked for uncontrolled. checked plus onCheckedChange when you own the state.
Composition
The thumb is inside the root. Pair it with Field for the label.
Description
FieldContent plus FieldDescription for the helper line under the label.
Choice Card
FieldLabel wraps the whole Field so the card is the click target.
Disabled
disabled on the switch, data-disabled on the Field so the label greys out with it.
Invalid
aria-invalid on the switch. data-invalid on the Field. Both, or the label stays the wrong color.
Size
size="sm" in a dense list. Default is default.
RTL
Wrap with DirectionProvider and dir="rtl". Labels stay Arabic.
API
Prop
Type
Keyboard
| Key | Action |
|---|---|
Space | Toggle the focused switch |
Enter | Toggle the focused switch |
Tab | Move to the next control |
Notes
Invalid needs two attributes
aria-invalid on the switch, data-invalid on the Field. One without the other leaves the control or the label unstyled.
If the setting should wait for submit, that is a Checkbox.
With other components
Label and helper text
LabelClick the words
CardSettings row frame
FormSave the preference
AccordionGroup in a panel
ItemRow in a list
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Spinner
React spinner for buttons, badges, and async waits. Built with TypeScript and Tailwind CSS for Next.js using Base UI — size it with utilities, keep role=status.
Table
React table for invoices, orders, and static reports. Built with TypeScript and Tailwind CSS for Next.js using Base UI — caption, header, body, and footer.