shadcn.io is not affiliated with official shadcn/ui
Switch examples · Standard
Checked Switch for React
A switch that starts on and keeps its own state after that.
A Switch that starts on, for settings that are enabled by default: a remembered preference, or an opt-out feature. The default prop sets only the first state, so no state of your own is needed until something has to read the value.
Preview
Installation
FAQ
How do I control this switch in React?
The switch starts on through its default prop, which only sets the starting state; after that it keeps its own state. To control it, keep the on or off state in your own state and pass it back.
The prop is defaultChecked.
Pass checked; onCheckedChange receives the new boolean.
What do screen readers call this switch?
It has no visible label, so the demo passes aria-label (Wi-Fi). Change it to the setting the switch controls, or use a visible FieldLabel instead.
How do I stop people from toggling it?
Disable it. The switch then matches data-disabled, which fades it to half opacity and sets cursor-not-allowed.
Pass disabled.
How do I make this switch smaller?
Set size="sm". The default size is default. For a different track or thumb, edit those classes in the Switch file in your ui folder.
Related
- Default SwitchA switch in its default off state, with
- Small SwitchA small switch for dense layouts such as
- Disabled SwitchA disabled switch that shows its state
- Square SwitchA switch with square corners on its track
- Square Switch with LabelA square switch that starts on, with a
- Indeterminate CheckboxA checkbox that starts indeterminate, the