Switch
A toggle control for switching between two states, like on and off.
Switch
Installation
pnpm dlx stera-ui@latest add switch
Examples
With Description
Place FieldContent between the label and switch to add a description.
Receive emails about new products, features, and more.
With Description
Choice Card
Wrap a Field inside FieldLabel to make the entire card clickable. The card highlights automatically when the switch is checked.
Choice Card
Sizes
Sizes
| Size | Description |
|---|---|
sm | Compact size (24×16) |
md | Standard size (32×16) |
lg | Large size (64×28) |
Disabled
Disabled
API Reference
Built on Base UI's Switch primitive — see the full API reference there.
| Prop | Type | Default |
|---|---|---|
size | "sm" | "md" | "lg" | "md" |
checked | boolean | — |
defaultChecked | boolean | — |
onCheckedChange | (checked: boolean) => void | — |
disabled | boolean | false |
name | string | — |
value | string | — |