Toggle Group

A high-quality, unstyled React toggle group component that provides shared state to a series of toggle buttons.

Provides a shared state to a series of toggle buttons.

Anatomy

Import the component and use it as a single part:

Anatomy

import { ToggleGroup } from '@base-ui/react/toggle-group';

<ToggleGroup />;

Name	Type	Default	Description
`value`Optional	`readonly Value[] \| undefined`	—	The open state of the toggle group represented by an array of the values of all pressed toggle buttons. This is the controlled counterpart of `defaultValue`.
`defaultValue`Optional	`readonly Value[] \| undefined`	—	The open state of the toggle group represented by an array of the values of all pressed toggle buttons. This is the uncontrolled counterpart of `value`.
`disabled`Optional	`boolean \| undefined`	`false`	Whether the toggle group should ignore user interaction.
`orientation`Optional	`Orientation \| undefined`	`horizontal`	—
`loopFocus`Optional	`boolean \| undefined`	`true`	Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
`multiple`Optional	`boolean \| undefined`	`false`	When `false` only one item in the group can be pressed. If any item in the group becomes pressed, the others will become unpressed. When `true` multiple items can be pressed.