A segmented control that is a radio group in single mode and a set of independent toggle buttons in multiple mode.
SingleMultipleSmallDisabled item
Showing the bar view
<ToggleGroup bind:value ariaLabel="Chart type" items={[ { value: 'table', label: 'Table', icon: 'table' }, { value: 'bar', label: 'Bar', icon: 'bar-chart' }, { value: 'area', label: 'Area', icon: 'area-chart' } ]}/>Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { ToggleGroup } from '@chanrg/4ui';<ToggleGroup bind:value ariaLabel="Chart type" items={[ { value: 'table', label: 'Table', icon: 'table' }, { value: 'bar', label: 'Bar', icon: 'bar-chart' }, { value: 'area', label: 'Area', icon: 'area-chart' } ]}/>Multiple
Each segment becomes an independent toggle button with its own tab stop, and value becomes an array.
staging · production
<ToggleGroup type="multiple" bind:value={environments} ariaLabel="Environments shown" items={[ { value: 'staging', label: 'Staging' }, { value: 'canary', label: 'Canary' }, { value: 'production', label: 'Production' } ]}/>API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | single | multiple | single | `single` picks one segment; `multiple` toggles each independently. |
value | string | string[] ($bindable) | — | Selected value(s): a string in single mode, an array in multiple mode. |
items | ToggleGroupItem[] | [] | value, label, optional icon and disabled. |
size | sm | md | md | Segment height and padding. |
ariaLabel | string | required | Names the group — the segments alone rarely say what they choose. |
onchange | (value) => void | — | Fires with the new value(s). |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
--4ui-surface-2 | Group background behind the segments. |
--4ui-accent | Chosen segment. |
Accessibility
- Single mode is a radiogroup: one tab stop, the arrows both move and choose, and the chosen segment carries aria-checked.
- Multiple mode is a group of toggle buttons: each is its own tab stop with aria-pressed, and the arrows only move.
- Arrows follow visual order and skip disabled segments; Home and End jump to the ends.
- Re-pressing the chosen segment in single mode is a no-op, because a radio cannot be un-chosen.