Toggle Group

React

Usage

import { ToggleGroup } from '@zalify-ui/react'

<ToggleGroup.Root>
  <ToggleGroup.Item />
</ToggleGroup.Root>

Use the multiple prop to allow multiple items to be selected at once.

React

Here is an a toggle group used as a toolbar with icon buttons.

React

Prop	Default	Type
`deselectable`	`true`	`boolean` Whether the toggle group allows empty selection. Note: This is ignored if `multiple` is `true`.
`loopFocus`	`true`	`boolean` Whether to loop focus inside the toggle group.
`orientation`	`\horizontal\`	`Orientation` The orientation of the toggle group.
`rovingFocus`	`true`	`boolean` Whether to use roving tab index to manage focus.
`variant`		`'outline'`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultValue`		`string[]` The initial selected value of the toggle group when rendered. Use when you don't need to control the selected value of the toggle group.
`disabled`		`boolean` Whether the toggle is disabled.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string; item: (value: string) => string }>` The ids of the elements in the toggle. Useful for composition.
`multiple`		`boolean` Whether to allow multiple toggles to be selected.
`onValueChange`		`(details: ValueChangeDetails) => void` Function to call when the toggle is clicked.
`value`		`string[]` The controlled selected value of the toggle group.

Prop	Default	Type
`value`*		`string`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`		`boolean`