ToggleGroup

Connected or segmented button group for single or multi selection. Three variants: default (connected), pill (separated), underline (tab-like).

Preview

Usage

import { ToggleGroup } from '@ramtt/ui'

<ToggleGroup
  options={['7d', '30d', '90d']}
  value="7d"
  onChange={setValue}
/>
<ToggleGroup
  variant="pill"
  options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]}
  value="a"
  onChange={setValue}
/>

Props

Prop	Type	Default	Description
options*	`(string \| { value: string; label: string })[]`	—	Toggle options
value*	`string \| string[]`	—	Selected value(s)
onChange*	`(value: string \| string[]) => void`	—	Change handler
variant	`'default' \| 'pill' \| 'underline'`	'default'	Visual variant
size	`'sm' \| 'md' \| 'lg'`	'md'	Size preset
multi	`boolean`	false	Allow multiple selection
ariaLabel	`string`	—	Accessible label for the group