Switch
A control that allows the user to toggle between checked and not checked.
Made by shadcn
Installation
Loading component...
Disabled
Loading component...
When to use
Switches provide binary toggle controls. Use this decision tree:
Usage
<Switch />Props
Examples
Default
Loading component...
Advanced Label
Loading component...
Card style
Loading component...
Settings panel
Loading component...
Form
Loading component...
Keyboard interactions
| Key | Action |
|---|---|
Tab to the switch | Focus lands on the switch. |
Space | Toggles checked state. |
Enter | Submits the surrounding form — does not toggle the switch (Space is the dedicated toggle key). |
Accessibility
- Base UI renders the switch as a real
<button role="switch">witharia-checked. It also sets the Radix-compatdata-state="checked" | "unchecked"attribute so existing selectors keep working. - Always pair with a visible
<Label htmlFor>— switches without labels are ambiguous ("on for what?"). - Use a switch for immediate-effect binary settings (notifications on/off, theme toggle). For binary form values
submitted alongside other fields prefer a
Checkbox— its ARIA semantics are better understood by assistive tech. onCheckedChangeis the Radix-style single-argument(checked: boolean) => void.
Credits
- We use Base UI for the switch component.
- We take our inspiration from Shadcn UI for the switch style.
Recent changes
- patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
- minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
- minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
- majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
- minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109
Built by malinskibeniamin. The source code is available on GitHub.