Components

Toggle Group

A set of two-state buttons that can be toggled on or off.

Installation

pnpm dlx shadcn@latest add @reui/base-toggle-group

Prop	Type	Default	Description
`defaultValue`	`any[]`	-	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`.
`value`	`any[]`	-	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`.
`onValueChange`	`(groupValue: any[], eventDetails: Toggle.Group.ChangeEventDetails) => void`	-	Callback fired when the pressed states of the toggle group changes.
`toggleMultiple`	`boolean`	`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.
`disabled`	`boolean`	`false`	Whether the toggle group should ignore user interaction.
`loop`	`boolean`	`true`	Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
`orientation`	`Orientation`	`'horizontal'`	-
`className`	`string \| ((state: Toggle.Group.State) => string)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.

Attribute	Type	Description
`data-orientation`	`'horizontal' \| 'vertical'`	Indicates the orientation of the toggle group.
`data-disabled`	-	Present when the toggle group is disabled.
`data-multiple`	-	Present when the toggle group allows multiple buttons to be in the pressed state at the same time.

On This Page

API Reference

ToggleGroup Props

Prop	Type	Default	Description
`defaultValue`	`any[]`	-	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`.
`value`	`any[]`	-	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`.
`onValueChange`	`(groupValue: any[], eventDetails: Toggle.Group.ChangeEventDetails) => void`	-	Callback fired when the pressed states of the toggle group changes.
`toggleMultiple`	`boolean`	`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.
`disabled`	`boolean`	`false`	Whether the toggle group should ignore user interaction.
`loop`	`boolean`	`true`	Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
`orientation`	`Orientation`	`'horizontal'`	-
`className`	`string \| ((state: Toggle.Group.State) => string)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.

ToggleGroup Data Attributes

Attribute	Type	Description
`data-orientation`	`'horizontal' \| 'vertical'`	Indicates the orientation of the toggle group.
`data-disabled`	-	Present when the toggle group is disabled.
`data-multiple`	-	Present when the toggle group allows multiple buttons to be in the pressed state at the same time.