ToggleGroup

Pass items as { value, label, disabled? }. The machine manages roving focus, arrow keys, and pressed values.

Use the discriminated API for type-safe values: type="single" uses a string, while type="multiple" uses a string array. The former array-only API remains available for compatibility. Give a single-select group an accessible name through rootProps.

import { ToggleGroup } from '@manti-ui/react';

const items = [
  { value: 'left', label: 'Left' },
  { value: 'center', label: 'Center' },
  { value: 'right', label: 'Right' },
];

export default function ToggleGroupBasic() {
  return <ToggleGroup items={items} variant="primary" defaultValue={['center']} />;
}

Multiple selection

Sizes

API

Prop	Type	Default	Description
`items`	`ToggleGroupItem[]`	—	The options — each `{ value, label, disabled? }`.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size.
`variant`	`MantiVariant`	`'primary'`	Active variant for pressed items.
`type`	`'single' \| 'multiple'`	—	Selection mode. Single mode uses scalar string values; multiple mode uses arrays.
`value`	`string \| string[]`	—	Controlled pressed values.
`defaultValue`	`string \| string[]`	—	Initial pressed values for uncontrolled usage.
`onValueChange`	`(value: string \| string[]) => void`	—	Called whenever the pressed set changes.
`rootProps`	`HTMLAttributes<HTMLDivElement>`	—	ARIA, data, style, class, and native props for the group root.
`getItemProps`	`(item: ToggleGroupItem) => ButtonHTMLAttributes`	—	Props merged onto every item button.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout axis and arrow-key direction.
`disabled`	`boolean`	—	Disable the whole group.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="toggle-group"][data-part="root"]`	The wrapper that owns size, variant, and orientation.
`item`	`[data-scope="toggle-group"][data-part="item"]`	A single toggle button.

Tokens

Token	Controls
`--manti-toggle-group-height`	height
`--manti-toggle-group-padding-x`	padding x
`--manti-toggle-group-radius`	radius

Last updated 13 September 2026