videorc/uiSwitch
The one control for a boolean, on Base UI. On, its track is the chrome fill and its knob the inverse chrome bead.
Installation
$ pnpm dlx shadcn@latest add @videorc/switchUsage
import { Switch } from "@/components/ui/switch";<Field orientation="horizontal">
<FieldLabel>Save local recording</FieldLabel>
<Switch />
</Field>A switch is the one way to turn something on or off: never an On and Off pair, and never a toggle button. In a settings list, put it in a SettingsRow.
Examples
Sizes
sm is a 16 px track for a row that is denser than a page, such as a source's quick control. It is a track size, not a control height.
Disabled
A disabled switch says why in its description. Disable every control a lock covers, rather than leaving one that looks enabled.
Theming
| Token or attribute | Meaning |
|---|---|
chrome-fill | The track while on |
bg-input/90 | The recessed track while off |
chrome-bead | The knob while off |
chrome-bead-ink | The knob on its chrome track: black in dark, pearl in light |
ring-knob-ring | The knob's hairline rim |
data-checked, data-unchecked, data-disabled | The state, from Base UI |
data-size | default (32 × 20) or sm (24 × 16) |
Keyboard
| Key | Action |
|---|---|
| Space | Toggles the switch |
| Enter | Toggles the switch |
| Tab | Moves focus to the next control |
Accessibility
The switch is a role="switch" span with aria-checked, beside a hidden native input that carries its form value. Its id goes on that hidden input, so a FieldLabel toggles it on click and Base UI names the switch by that label. Never put a switch inside a button or a clickable row: a control inside a control can't be reached on its own.
API reference
Every Base UI Switch root prop, plus:
Prop
Type