Components
Toggle group
Toggles that share a track.
board · bold
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/toggle-group.jsonSingle keeps a selection, multiple can be empty
single is one-of-n and cannot be emptied — deselecting the active item does
nothing. That is deliberate: a view switcher that can reach "no view selected"
puts the screen in a state nothing knows how to render.
multiple can be empty, because "no filters" is a meaningful state.
Toggle group or segmented
A Segmented control is a view switcher and reads as one recessed track with a lifted pill. A toggle group is a set of actions that happen to be adjacent — bold, italic, underline. The shape difference keeps them apart.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { value, label, title? }[] | — | Label takes a node, so an icon works. |
| value | T[] | — | Always an array, even for single. |
| type | "single" | "multiple" | "single" | Whether the group can be emptied. |