shadcn.io is not affiliated with official shadcn/ui
Switch examples · Labeled
Switch with Label for React
A switch with a label, Airplane Mode, that toggles it when clicked.
The Switch with its label beside it, in a horizontal field. The label names the setting, clicking it toggles the switch, and screen readers read it with the switch. Use it for most single settings.
Preview
Installation
FAQ
Why does Airplane Mode toggle the switch?
The Switch and a FieldLabel sit in a horizontal Field with w-fit.
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.
Should this be a Switch or a Checkbox?
Use a Switch for a setting that takes effect at once. Use a Checkbox for a choice that is submitted later with a form, or when several options can be picked in a list.
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
- Switch with DescriptionA switch with a label and a line of
- Switch with On LabelA switch that starts on, with the word On
- Switch with State LabelsA switch with On and Off text on both
- Default SwitchA switch in its default off state, with
- Icon with Label SwitchA switch with a bell icon and a
- Feature Card SwitchA bordered card with an icon, a label, a