ToggleGroup

import { ToggleGroup } from 'yarcl';

Single selection

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

DayWeekMonth

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.

BIU

<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.Items.
color	Colorconfig		Color of every item, from the colors config.
disabled	boolean		Disables every item.
radius	'size' | Radiusconfig		Radius of every item, from the radii config, or 'size' to match the item size.
selectedVariant	Variantconfig	config.defaults.variant	Variant of selected items, from the variants config.
size	Sizeconfig		Size of every item, from the sizes config.
variant	Variantconfig	config.defaults.softVariant	Variant of unselected items, from the variants config.

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.