Radio Group
Toggles
Source and install need .
pnpm dlx shadcn@latest add @assembli/switchSwitch
The everyday switch: a thumb that stretches toward where it's going while you press, travels on a soft spring and casts a real shadow. Optional on/off glyphs so state doesn't rest on color alone, a loading state that spins in the thumb while a change saves, labels on either side for settings rows, and three sizes. Built on Base UI.
- Dependencies
- @base-ui/react(npm, opens in a new tab)
Props
Other props pass through to the root element.
label
React.ReactNode
description
React.ReactNode
A second, quieter line under the label. Linked with
aria-describedby.labelPosition
"start" | "end"
Default
"end"endputs the label after the switch;startmakes a full-width settings row with the switch on the right.size
keyof typeof SIZES
Default
"md"loading
boolean
Spins in the thumb and holds the value (read-only,
aria-busy) while a change saves.indicators
boolean
Prints a bar for on and a ring for off inside the track, so state doesn't rest on color alone.
className
string
| Prop | Type | Default | Description |
|---|---|---|---|
| label | React.ReactNode | – | |
| description | React.ReactNode | – | A second, quieter line under the label. Linked with aria-describedby. |
| labelPosition | "start" | "end" | "end" | end puts the label after the switch; start makes a full-width settings row with the switch on the right. |
| size | keyof typeof SIZES | "md" | |
| loading | boolean | – | Spins in the thumb and holds the value (read-only, aria-busy) while a change saves. |
| indicators | boolean | – | Prints a bar for on and a ring for off inside the track, so state doesn't rest on color alone. |
| className | string | – |
