ToggleGroup

forms

Segmented button group for single or multi-select toggling. Token-driven colors, padding, border radii. ARIA radio group pattern.

Import

typescript
import { ToggleGroup } from "packages/ui/src";

Props

ToggleGroupProps

PropTypeRequired
optionsToggleOption[]Yes
valuestring | string[]Yes
onChange(value: string | string[]) => void, multiple?: booleanYes

Examples

Toggle Group

Segmented button group for single or multi-select toggling.

Single Select (View Mode)

Selected: grid

Multi-Select (Tags)

Selected: react

With Disabled Option

Metadata

Component Metadata
Familyforms
FrameworksNext.js, Astro/EmDash
DescriptionSegmented button group for single or multi-select toggling. Token-driven colors, padding, border radii. ARIA radio group pattern.
PropsToggleGroupProps (options: ToggleOption[], value: string | string[], onChange: (value: string | string[]) => void, multiple?: boolean)
Statessingle-select, multi-select, active, inactive, disabled
A11y
  • Container has role=group
  • Each button has role=radio with aria-checked
  • Disabled options marked with disabled attribute
Responsive
  • Inline-flex, wraps naturally
Motion
  • Background and color transitions (0.15s)
Token Dependencies
  • components.toggleGroup.bg
  • components.toggleGroup.borderRadius
  • components.toggleGroup.gap
  • components.toggleGroup.padding
  • components.toggleGroup.buttonBg
  • components.toggleGroup.buttonBgActive
  • components.toggleGroup.buttonColor
  • components.toggleGroup.buttonColorActive
  • components.toggleGroup.buttonRadius
  • components.toggleGroup.buttonPaddingX
  • components.toggleGroup.buttonPaddingY
  • components.toggleGroup.fontSize
Content Slotsoption labels (string)
CMS Bindings
  • Options from CMS enum/select field
Test Cases
  • Renders all options
  • Has role=group
  • Active option has active class
  • Buttons have role=radio
  • aria-checked on active button
  • Disabled option has disabled attribute
  • Inactive buttons lack active class
  • Passes className through