Toggle Group

Provides a shared state to a series of toggle buttons.

Default

Controlled

Aligned: left

Disabled

Sizes

With Text

Ghost

API Reference

ToggleGroupRoot

Container that provides shared state to a series of toggle buttons. Built on Base UI ToggleGroup.

PropTypeDefaultDescription
classNamestring-Additional CSS classes
...propsReact.ComponentProps<typeof BaseToggleGroup>-Base UI ToggleGroup props including value, onValueChange, toggleMultiple, disabled

ToggleGroupItem

Individual toggle button within a ToggleGroup.

PropTypeDefaultDescription
variant'default' | 'ghost''default'Visual style of the toggle item
size'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg''default'Size of the toggle item
classNamestring-Additional CSS classes
...propsReact.ComponentProps<typeof Toggle>-Base UI Toggle props including value, disabled