Switch
An on/off setting that takes effect at once, with a settings-row label that toggles it.
Installation
npx shadcn@latest add @quireui/switchUsage
<SwitchLabel description="Customers can pay invoices with a saved card.">
Card payments
</SwitchLabel>SwitchLabel is a settings row: the label and an optional description on the left, the switch on the right, and the whole row toggles it. It takes every Switch prop. Use Switch on its own where the label lives elsewhere, and give it an aria-label.
States
Off, on, and disabled either way. The switch is sized from the control height, so it follows the density: 28 by 16px compact, 32 by 18px default, 40 by 22px comfortable.
In a form
Inside a Field with a name, the switch is submitted with the form like a checkbox.
Accessibility
It is read as a switch, on or off. A description on SwitchLabel is read after the label.
| Key | Action |
|---|---|
| Space / Enter | Toggles the focused switch. |
| Tab / Shift+Tab | Moves to the next or previous control. |
Motion
The thumb slides in 160ms while the track colour fades. Toggling from the keyboard is instant, and under reduced motion the thumb jumps while the colour still fades.
Switch or checkbox?
A switch is for a setting that takes effect the moment you flip it. When the choice only counts once a form is submitted, or there is a list of options to pick from, use a Checkbox.
API reference
Switch
Also takes every prop of Base UI's Switch.Root. Style it with [data-slot="switch"].
SwitchLabel
A settings row: label and optional description on the left, the switch on the right. The whole row toggles it, so the switch is never the only thing to aim for.
Prop
Type
Style it with [data-slot="switch-label"].