shadcn.io is not affiliated with official shadcn/ui
Switch examples · Cards
Settings List Switch for React
Two settings rows, each with a label, a description and a switch, in a divided list.
A bordered list of settings separated by lines, each row with a label, a description and a Switch: Marketing emails off, Security emails on. Use it for a group of related settings without a card around each one.
Preview
Installation
FAQ
How are the two settings stacked?
The wrapper is flex flex-col divide-y rounded-lg border bg-background. Each row is a horizontal Field with p-4, holding a FieldContent and a Switch.
Which switch starts on?
Marketing emails starts off. Security emails starts on through its default prop.
The prop is defaultChecked.
How is each label tied to its switch?
Each row is its own Field, so each label belongs to its own switch.
The Switch has an id, and the FieldLabel points at it with htmlFor.
How do I control this switch in React?
Each switch keeps its own state here. To control them, keep each switch's on or off state in your own state, such as one object with a key per setting, and pass it back.
Pass checked; onCheckedChange receives the new boolean.
Related
- Settings Card SwitchA bordered settings card with a bell, a
- Feature Card SwitchA bordered card with an icon, a label, a
- Switch in ItemAn outlined item with a title, a
- Icon with Label SwitchA switch with a bell icon and a
- Theme Toggle with Icons SwitchA switch between a sun and a moon icon
- Volume Toggle SwitchA switch between a muted and a volume