import {Layout} from '../../src/Layout'; export default Layout;

import {ToggleButtonGroup, ToggleButton, Text} from '@react-spectrum/s2'; import docs from 'docs:@react-spectrum/s2';

export const tags = ['toggle', 'btn']; export const description = 'Allows a user to toggle multiple options, with single or multiple selection.';

ToggleButtonGroup

<PageDescription>{docs.exports.ToggleButtonGroup.description}</PageDescription>

tsx

"use client";
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/* PROPS */>
  <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.

tsx

"use client";
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"
        /*- begin highlight -*/
        /* PROPS */
        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

tsx

<ToggleButtonGroup>
  <ToggleButton />
</ToggleButtonGroup>

ToggleButtonGroup