ToggleGroup

import { ToggleGroup } from '@yarcl/react';

Single selection

type="single" behaves like a segmented control. With required, the selected item can’t be turned off.

const [range, setRange] = useState<string | null>('week');

<ToggleGroup type="single" value={range} onValueChange={setRange} required aria-label="Range">
  <ToggleGroup.Item value="day">Day</ToggleGroup.Item>
  <ToggleGroup.Item value="week">Week</ToggleGroup.Item>
  <ToggleGroup.Item value="month">Month</ToggleGroup.Item>
</ToggleGroup>

Multiple selection

type="multiple" lets any number of items be on. icon makes an item square.

<ToggleGroup type="multiple" defaultValue={['bold']} aria-label="Formatting" variant="ghost" selectedVariant="soft">
  <ToggleGroup.Item value="bold" icon aria-label="Bold"><b>B</b></ToggleGroup.Item>
  <ToggleGroup.Item value="italic" icon aria-label="Italic"><i>I</i></ToggleGroup.Item>
</ToggleGroup>

Styling

Unselected items use variant (default: defaults.softVariant), selected items use selectedVariant (default: defaults.variant). Both are keys of your variants.

Keyboard

Key	Action
`Tab`	moves into the group, to the selected item (or the first one)
`←` `→` `↑` `↓`	moves between items, skipping disabled ones
`Home` `End`	first and last item
`Space` `Enter`	toggles the focused item

Items use aria-pressed. The group is role="group"; give it an aria-label.

Props

ToggleGroup

Plus type ('single' or 'multiple'), and value, defaultValue and onValueChange typed for that mode. With type="single", required keeps one item on.

Prop	Type	Default	Description
`attached`	`boolean`	`true`	Joins the items into one segmented control.
`children`	`ReactNode`		`ToggleGroup.Item`s.
`color`	`Color`config		Color of every item, from the `colors` config.
`disabled`	`boolean`		Disables every item.
`radius`	`'size' \| Radius`config		Radius of every item, from the `radii` config, or `'size'` to match the item size.
`selectedVariant`	`Variant`config	`config.defaults.variant`	Variant of selected items, from this component's variant map or shared `variants`.
`size`	`'lg' \| 'xs' \| 'sm' \| 'md' \| 'xl'`		Size of every item, from the `sizes` config.
`variant`	`Variant`config	`config.defaults.softVariant`	Variant of unselected items, from this component's variant map or shared `variants`.

ToggleGroup.Item

Prop	Type	Default	Description
`value` required	`string`		Identifies the item in the group's value.
`icon`	`boolean`		Makes the item square, for icon-only items. Give it an `aria-label`.