Toggle group

InstallationCopy Anchor Link

npx shadcn@latest add @quireui/toggle-group

UsageCopy Anchor Link

<ToggleGroup aria-label="Range" value={range} onValueChange={setRange}>
  <ToggleGroupItem value="7d">7d</ToggleGroupItem>
  <ToggleGroupItem value="30d">30d</ToggleGroupItem>
</ToggleGroup>

By default it is a segmented control: one option is always chosen, and pressing it again keeps it, so the group never ends up with nothing selected. The value is a plain string. A raised marker slides to the choice, the same shape as the contained Tabs, so the two read as one family.

IconsCopy Anchor Link

Give an item a label and only its icon shows. The label becomes the tooltip and what screen readers announce.

MultipleCopy Anchor Link

multiple turns it into a row of independent toggles, like text styles, and the value becomes an array. A toggle that is on is pressed in, with a darker fill and its icon at full strength, while one that is off stays quiet on the track. That is deliberately different from the segmented control, where the choice is raised: there you pick one of several, here each item is on or off.

JoinedCopy Anchor Link

With joined, pressed neighbours share one shape, square where they meet with a hairline between. Use it where adjacency means something, like weekdays or time slots, so Monday to Friday reads as one working week and a gap in the shape is a gap in the schedule. Leave it off for independent toggles like text styles, where two styles sitting side by side means nothing.

SizesCopy Anchor Link

sm, md (default) and lg, all following density.

AccessibilityCopy Anchor Link

Give the group an aria-label. Each item is a toggle button, read as pressed or not, both as a segment and as an independent toggle.

MotionCopy Anchor Link

The marker slides in 160ms on the library's ease-out curve. From the keyboard it moves instantly. Before the page has measured where it goes, the chosen item draws its own background, so the first paint already looks right.

Toggle group or something else?Copy Anchor Link

• Switching between views of the same place, with panels: Tabs.
• Choosing one value in a form, especially with descriptions: Radio group.
• A single on/off setting: Switch.

API referenceCopy Anchor Link