forms

ToggleGroup

Example

Import

import { ToggleGroup } from '@connor-adams/designsystem'

Usage

A segmented control for switching between a few mutually-exclusive views (timeframe, chart type, account filter). For navigation between content panels prefer Tabs; use this for filters and settings.

<ToggleGroup
  type="single"
  defaultValue="month"
  items={[
    { value: 'week', label: 'Week' },
    { value: 'month', label: 'Month' },
    { value: 'year', label: 'Year' },
  ]}
  onValueChange={setRange}
/>

Variants: type="single" | "multiple", size="sm | default", optional per-item icon.

Props

Prop	Type	Default
items	ToggleItem[]	[]
type	"single" \| "multiple" \| undefined	single
value	string \| string[] \| null \| undefined	—
defaultValue	string \| string[] \| null \| undefined	—
onValueChange	((value: string \| string[] \| null) => void) \| undefined	—
size	"sm" \| "default" \| undefined	default