Components

Toggle Group

Buttons that stay pressed, in a row: any number of them, like filters, or at most one. One stop in the tab order; the arrow keys go through them.

Showing 2 of 3 kinds

Import

import { ToggleGroup, ToggleGroupItem } from '@rinzai/zen';

Examples

Single

At most one: pressing the pressed one releases it. Icon-only items carry an aria-label.

API reference

<ToggleGroup>

Buttons that stay pressed, in a row: any number of them (multiple, e.g. filters), or at most one, which can be released again. For exactly one always chosen, use Segmented. ←→ move between them, Home and End jump to the ends; Space or Enter presses.

Prop	Type	Default
`children` The ToggleGroupItems.	`ReactNode`	`—`
`defaultValue`	`string \| readonly string[] \| null`	`—`
`multiple` At most one pressed (the default); pressing another releases it. Any number pressed.	`boolean`	`—`
`name` Form field name: each pressed item's value is submitted under it.	`string`	`—`
`onValueChange`	`((value: string \| null) => void) \| ((value: readonly string[]) => void)`	`—`
`value` The pressed item's value, or null for none, when you keep it.	`string \| readonly string[] \| null`	`—`

<ToggleGroupItem>

One button of a ToggleGroup: text, an icon (give it an aria-label), or both.

Prop	Type	Default
`value`Required	`string`	`—`