useToggleButtonGroup

Provides the behavior and accessibility implementation for a toggle button group component. Toggle button groups allow users to select one or more options from a group.

Example

ToggleButtonGroup.tsx

ToggleButtonGroup.css

ToggleButton.css

Example

ToggleButtonGroup.tsx

ToggleButtonGroup.css

ToggleButton.css

import {ToggleButtonGroup, ToggleButton} from './ToggleButtonGroup';

<ToggleButtonGroup>
  <ToggleButton id="left">Left</ToggleButton>
  <ToggleButton id="center">Center</ToggleButton>
  <ToggleButton id="right">Right</ToggleButton>
</ToggleButtonGroup>

API

<ToggleButtonGroup>
  <ToggleButton>
    <SelectionIndicator />
  </ToggleButton>
</ToggleButtonGroup>

useToggleGroupState(props: ToggleGroupProps): ToggleGroupState

useToggleButtonGroup(
  props: AriaToggleButtonGroupProps,
state: ToggleGroupState,
ref: RefObject<HTMLElement | null>
): ToggleButtonGroupAria

useToggleButtonGroupItem(
  props: AriaToggleButtonGroupItemOptions<ElementType>,
state: ToggleGroupState,
ref: RefObject<any>
): ToggleButtonAria<HTMLAttributes<any>>

ToggleGroupState

Properties

Name	Type
`isDisabled`	`boolean`
Whether all items are disabled.

`selectionMode`	`'single' \| 'multiple'`
Whether single or multiple selection is enabled.
`selectedKeys`	`Set<Key>`
A set of keys for items that are selected.

Methods

`toggleKey(key: Key): void`
Toggles the selected state for an item by its key.
`setSelected(key: Key, isSelected: boolean): void`
Sets whether the given key is selected.
`setSelectedKeys(keys: Set<Key>): void`
Replaces the set of selected keys.

AriaToggleButtonGroupProps

Name	Type	Default
`orientation`	`Orientation`	Default: `'horizontal'`
The orientation of the the toggle button group.
`isDisabled`	`boolean`	Default: —
Whether all items are disabled.

`selectionMode`	`'single' \| 'multiple'`	Default: `'single'`
Whether single or multiple selection is enabled.
`selectedKeys`	`Iterable<Key>`	Default: —
The currently selected keys in the collection (controlled).
`defaultSelectedKeys`	`Iterable<Key>`	Default: —
The initial selected keys in the collection (uncontrolled).
`onSelectionChange`	`(keys: Set<Key>) => void`	Default: —
Handler that is called when the selection changes.
`disallowEmptySelection`	`boolean`	Default: —
Whether the collection allows empty selection.

ToggleButtonGroupAria

Name	Type
`groupProps`	`DOMAttributes`
Props for the toggle button group container.

AriaToggleButtonGroupItemProps

Name	Type	Default
`id`	`Key`	Default: —
An identifier for the item in the `selectedKeys` of a ToggleButtonGroup.
`isDisabled`	`boolean`	Default: —
Whether the button is disabled.
`children`	`ReactNode`	Default: —
The content to display in the button.
`elementType`	`ElementType \| JSXElementConstructor<any>`	Default: `'button'`
The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`.