Switch
Toggle control for binary on/off states with smooth animations
A switch toggles a single setting on or off and applies the change immediately. Use it for instant preferences like notifications or dark mode, not for choices a user submits later with a form (reach for Checkbox there).
Preview
Installation
Usage
Examples
Card
Wrap the switch in a Label to make a whole card row toggle the control.
Pill Shape
Use shape to set the thumb's aspect ratio and travel distance.
| Shape | Description |
|---|---|
circle | The default, a round thumb. |
pill | A wider, rectangular thumb. |
Form Integration
Use Field for labeling and form participation. See the Forms guide for more patterns.
Receive email notifications when someone mentions you.
API Reference
The Switch component is built on top of Base UI's Switch. All Base UI props are supported. The documentation below only covers custom props specific to our implementation.
For the complete Base UI API, see the Base UI Switch documentation.
Props
Switch
Toggle control for binary on/off states. Wraps Base UI's Switch.Root and Switch.Thumb.
Switch does not expose a variant prop like the other form fields. The unchecked track always uses bg-input-elevated, a translucent overlay that adapts to whatever substrate it sits on. This contrasts with both the thumb (white in light, page-dark in dark) AND the parent surface, so a single behavior works everywhere. See the Surfaces docs.