Toggle group
A quiet segmented control for choosing one option, or several, from a short set. Arrow keys move between the options.
bunx --bun shadcn@4.17.0 add @waimakers/toggle-group- npm dependencies
- @base-ui/react@1.9.0class-variance-authority@0.7.1
From the registry
Quiet segmented choices on Base UI. Array values represent single or multiple pressed options, with arrow-key navigation on both axes.
Examples
Single
One value at a time, for a filter or a view switch. The value is always an array.
Showing all agents.
Multiple
Several options can be on together, like text formatting.
Sizes
Small, default and large share the same track.
Joined
Spacing 0 joins the items into one bar, vertically here for a narrow panel.
States
Disabled refuses the whole group. Invalid draws the danger ring and points to its message.
Choose who can see this agent.