Toggle Group

Toggle Group fits compact option sets that act on press, such as text alignment, list or grid view, and formatting marks. It handles single or multiple pressed items and arrow-key navigation across the set.

Install

bashnpx shadcn@4.18.0 add @siteplane/toggle-group

Import it from @/siteplane/components/toggle-group. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Radio Group: Pick Radio Group when one answer is a required form value. Toggle Group lets people clear a single selection.
• vs Tabs: Pick Tabs when each option swaps a content panel. Toggle Group changes a view setting.
• vs Toolbar: Pick Toolbar when the row mixes plain buttons, selects and toggles. A Toggle Group can sit inside it.
• vs Toggle: Use a lone Toggle for a single on/off option.

Rules

• Treat value as an array in both single and multiple mode.
• To keep one option selected at all times, ignore empty arrays in onValueChange.
• Name each toggle group: point aria-labelledby at a visible FieldLabel, or fall back to aria-label.
• Set size and variant on the group so the ToggleGroupItems match. Split sets with ToggleGroupSeparator.
• Set orientation="vertical" for stacked items so arrow keys follow the layout.

Reference

• Toggle Group docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Actions. Read the installed source under src/siteplane before relying on an API.