shadcn.io is an independent project built on shadcn/ui
A row shows the label Push Notifications, the description Receive notifications on your device, and a switch that starts off. Clicking the label toggles the switch.
Add the description when the label alone does not say what the setting does. A choice saved on submit fits a Checkbox. In React, Base UI toggles when that label is clicked.
Installation
Anatomy
Usage
<Field className="max-w-sm" orientation="horizontal">
<FieldContent>
<FieldLabel htmlFor="switch-with-description-push">
Push Notifications
</FieldLabel>
<FieldDescription>Receive notifications on your device</FieldDescription>
</FieldContent>
<Switch id="switch-with-description-push" />
</Field>FAQ
How are the label, the description and the switch arranged?
A horizontal Field holds a FieldContent, with the FieldLabel and the FieldDescription, and then the Switch. max-w-sm keeps the row from stretching.
Is the description tied to the switch?
The label is: clicking Push Notifications toggles the switch, and screen readers read it as the switch's name.
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.
API Reference
Field
Sets orientation="horizontal" and htmlFor="switch-with-description-push". The rest is on the Field page.
Switch
Sets id="switch-with-description-push". The rest is on the Switch page.
