ToggleButtonGroup

A ToggleButtonGroup is a grouping of related ToggleButtons, with single or multiple selection.

selectionMode

orientation

size

density

staticColor

isQuiet

isJustified

isDisabled

import {ToggleButtonGroup, ToggleButton, Text} from '@react-spectrum/s2';
import TextBold from '@react-spectrum/s2/icons/TextBold';
import TextItalic from '@react-spectrum/s2/icons/TextItalic';
import TextUnderline from '@react-spectrum/s2/icons/TextUnderline';

<ToggleButtonGroup>
  <ToggleButton id="bold">
    <TextBold />
    <Text>Bold</Text>
  </ToggleButton>
  <ToggleButton id="italic">
    <TextItalic />
    <Text>Italic</Text>
  </ToggleButton>
  <ToggleButton id="underline">
    <TextUnderline />
    <Text>Underline</Text>
  </ToggleButton>
</ToggleButtonGroup>

Selection

Use the selectionMode prop to enable single or multiple selection. The selected toggle buttons can be controlled via the selectedKeys prop, matching the id of each <ToggleButton>. Toggle buttons can be disabled with the isDisabled prop. See the selection guide for more details.

Current selection: bold

selectionMode

disallowEmptySelection

import {ToggleButtonGroup, ToggleButton, type Key} from '@react-spectrum/s2';
import {useState} from 'react';
import TextBold from '@react-spectrum/s2/icons/TextBold';
import TextItalic from '@react-spectrum/s2/icons/TextItalic';
import TextUnderline from '@react-spectrum/s2/icons/TextUnderline';
import TextStrikeThrough from '@react-spectrum/s2/icons/TextStrikeThrough';

function Example(props) {
  let [selected, setSelected] = useState(new Set<Key>(['bold']));

  return (
    <>
      <ToggleButtonGroup
        {...props}
        aria-label="Text style"
        density="compact"
        selectionMode="multiple"
        selectedKeys={selected}
        onSelectionChange={setSelected}>
        <ToggleButton id="bold" aria-label="Bold">
          <TextBold />
        </ToggleButton>
        <ToggleButton id="italic" aria-label="Italic" isDisabled>
          <TextItalic />
        </ToggleButton>
        <ToggleButton id="underline" aria-label="Underline">
          <TextUnderline />
        </ToggleButton>
        <ToggleButton id="strike" aria-label="Strikethrough">
          <TextStrikeThrough />
        </ToggleButton>
      </ToggleButtonGroup>
      <p>Current selection: {[...selected].join(', ')}</p>
    </>
  );
}

API

<ToggleButtonGroup>
  <ToggleButton />
</ToggleButtonGroup>

ToggleButtonGroup

Name	Type	Default
`isEmphasized`	`boolean`	Default: —
Whether the button should be displayed with an emphasized style.
`styles`	`StylesPropWithHeight`	Default: —
Spectrum-defined styles, returned by the `style()` macro.
`children`	`ReactNode`	Default: —
The children of the group.
`size`	`'XS' \| 'S' \| 'M' \| 'L' \| 'XL'`	Default: `"M"`
Size of the buttons.
`density`	`'compact' \| 'regular'`	Default: `"regular"`
Spacing between the buttons.
`isQuiet`	`boolean`	Default: —
Whether the button should be displayed with a quiet style.
`isJustified`	`boolean`	Default: —
Whether the buttons should divide the container width equally.
`staticColor`	`'white' \| 'black' \| 'auto'`	Default: —
Whether the button should be displayed with an emphasized style.
`orientation`	`'horizontal' \| 'vertical'`	Default: `'horizontal'`
The axis the group should align with.
`isDisabled`	`boolean`	Default: —
Whether the group is 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.