Switch
A toggle for boolean settings, wrapping the Base UI Switch. Keyboard accessible, screen-reader friendly, springy thumb.
Playground
Every control maps to a prop. The Code tab always shows the markup for exactly what you've configured.
States
Off, on, and disabled in either position. The thumb settles with a light spring; keyboard focus adds a ring in any state.
Styling states
State comes through data attributes (data-checked, data-disabled), so custom styling never needs JavaScript:
.ub-switch[data-checked] {
background: var(--ub-success);
}Props
The full Base UI Switch root API passes through. The ones you'll reach for:
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | – | Controlled state. Pair with onCheckedChange. |
defaultChecked | boolean | false | Initial state when uncontrolled. |
onCheckedChange | (checked: boolean) => void | – | Called when the state changes. |
disabled | boolean | false | Blocks interaction and dims the control. |
Agent instructions
Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.
Switch, from @usebones/react.
- Uncontrolled: defaultChecked. Controlled: checked + onCheckedChange. disabled.
- Wrap in a <label> with its text so the text is clickable, or put it inside FieldRoot with a FieldLabel.
- Restyle in CSS via [data-checked], [data-disabled]; the thumb is .ub-switch-thumb. Tokens only.