shadcn.io is not affiliated with official shadcn/ui
Switch examples · Cards
Settings Card Switch for React
A bordered settings card with a bell, a label, a description and a switch.
A settings card for notifications: a bell emoji on a gradient tile, the setting's name with a short description, and a Switch. The tile gives each setting in a list its own visual cue.
Preview
Installation
FAQ
How is the bell drawn on the card?
A span with text-lg shows the bell emoji inside a size-10 rounded-lg tile with bg-linear-to-br from-primary to-primary/60. The emoji has aria-hidden, since the label already says Notifications. The card is flex items-start gap-3 rounded-lg border bg-background p-4.
How is Notifications tied to the switch?
A horizontal Field holds a FieldContent, with the FieldLabel and the FieldDescription, and then the Switch.
The Switch has an id, and the FieldLabel points at it with htmlFor.
How do I control this switch in React?
Nothing in this file sets the on state, so the switch starts off and keeps its own state. To control it, keep the on or off state in your own state and pass it back. To start it on, use the default prop.
The prop is defaultChecked.
Pass checked; onCheckedChange receives the new boolean.
Does this switch submit with a form?
Give it a name. When on, it submits its value, which defaults to on. When off, it submits nothing.
With Base UI, uncheckedValue sets what it submits when off.
Related
- Feature Card SwitchA bordered card with an icon, a label, a
- Settings List SwitchTwo settings rows, each with a label, a
- Switch in ItemAn outlined item with a title, a
- Default SwitchA switch in its default off state, with
- Standard CardA basic card with a title, a description
- Icon with Label SwitchA switch with a bell icon and a