ToggleButtonGroup

A toggle button group allows a user to toggle multiple options, with single or multiple selection.

Theme

selectionMode

orientation

isDisabled

Example

ToggleButtonGroup.tsx

ToggleButtonGroup.css

Example

ToggleButtonGroup.tsx

ToggleButtonGroup.css

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

<ToggleButtonGroup aria-label="Text style">
  <ToggleButton id="left">Bold</ToggleButton>
  <ToggleButton id="center">Italic</ToggleButton>
  <ToggleButton id="right">Underline</ToggleButton>
</ToggleButtonGroup>

Selection

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

Current selection: bold

selectionMode

disallowEmptySelection

import type {Key} from 'react-aria-components';
import {useState} from 'react';
import {ToggleButtonGroup} from './ToggleButtonGroup';
import {ToggleButton} from './ToggleButton';
import {Bold, Italic, Underline, Strikethrough} from 'lucide-react';

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

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

Animation

Render a SelectionIndicator within each ToggleButton to animate selection changes.

Example

SegmentedControl.css

Example

SegmentedControl.css

import {ToggleButtonGroup, ToggleButton, ToggleButtonProps, SelectionIndicator, composeRenderProps} from 'react-aria-components';
import './SegmentedControl.css';

function SegmentedControlItem(props: ToggleButtonProps) {
  return (
    <ToggleButton {...props} className="segmented-control-item">
      {composeRenderProps(props.children, (children) => (<>
        <SelectionIndicator className="react-aria-SelectionIndicator button-base" data-selected />
        <span>{children}</span>
      </>))}
    </ToggleButton>
  );
}

<ToggleButtonGroup
  className="segmented-control button-base"
  data-variant="secondary"
  aria-label="Time period"
  defaultSelectedKeys={['day']}
  disallowEmptySelection>
  <SegmentedControlItem id="day">Day</SegmentedControlItem>
  <SegmentedControlItem id="week">Week</SegmentedControlItem>
  <SegmentedControlItem id="month">Month</SegmentedControlItem>
  <SegmentedControlItem id="year">Year</SegmentedControlItem>
</ToggleButtonGroup>

API

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