Components
Toggle group

Toggle Group

A set of toggle buttons for selection within a group.

UsageTypes

API reference docs for the component. Learn about the props, CSS, and other APIs of this exported module.

ToggleProps

value

string

disabled

boolean

ToggleGroupProps

defaultValue

string[]

dir

'ltr' | 'rtl'

The document's text/writing direction.

disabled

boolean

Whether the toggle is disabled.

getRootNode

() => ShadowRoot | Node | Document

A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

id

string

The unique identifier of the machine.

ids

Partial<{ root: string; toggle(value: string): string }>

The ids of the elements in the toggle. Useful for composition.

loop

boolean

Whether to loop focus inside the toggle group.

multiple

boolean

Whether to allow multiple toggles to be selected.

onValueChange

(details: ValueChangeDetails) => void

Function to call when the toggle is clicked.

orientation

Orientation

The orientation of the toggle group.

rovingFocus

boolean

Whether to use roving tab index to manage focus.

value

string[]

The values of the toggles in the group.

ToggleGroupContext

getToggleProps

(props: ToggleProps) => Dict<any>

rootProps

Dict<any>

setValue

(values: string[]) => void

Function to set the value of the toggle group.

value

string[]

The value of the toggle group.