Toggle Group
A set of two-state buttons that can be toggled on or off.
Installation
Default
Start with the standard single-select pattern from shadcn: one selected item at a time, outline styling, and a clear default value.
Preview
Controlled Multiple
Move to a controlled group when nearby UI needs the selected values. This example keeps a status card in sync with a multiple-select toggle group.
Preview
Launch Notifications
Choose every channel that should stay live while the launch room is active.
{notificationChannelsSummary}
Active Channels
{notificationChannelCount}
{notificationStatusCopy}
Vertical
Use orientation="vertical" when the toggle group behaves more like a compact navigation rail than a toolbar.
Preview