ToggleButtonGroup

ToggleButtonGroup uses the Button.Group component under the hood and manages selection state for its children. Each child should be a ToggleButton with a value prop.

<ToggleButtonGroup>
  <ToggleButton value="1">Button 1</ToggleButton>
  <ToggleButton value="2">Button 2</ToggleButton>
  <ToggleButton value="3">Button 3</ToggleButton>
</ToggleButtonGroup>

Use selectionMode to allow selecting multiple values at once.

<ToggleButtonGroup selectionMode="multiple">
  <ToggleButton value="1">Button 1</ToggleButton>
  <ToggleButton value="2">Button 2</ToggleButton>
  <ToggleButton value="3">Button 3</ToggleButton>
</ToggleButtonGroup>

Just like native inputs in React, ToggleButtonGroup can be used as a controlled or uncontrolled component. By default, it's uncontrolled and lets you set its initial state with the defaultValue prop. In this mode, change events are handled automatically.

<ToggleButtonGroup defaultValue={["1"]}>
  <ToggleButton value="1">Button 1</ToggleButton>
  <ToggleButton value="2">Button 2</ToggleButton>
  <ToggleButton value="3">Button 3</ToggleButton>
</ToggleButtonGroup>

To manually control the state, use the value prop. This gives you full control over the component's value and disables automatic handling. You'll need to update the state using the onChange handler, allowing you to add custom logic before updating.g you to add custom logic before the update occurs.

<ToggleButtonGroup value={["1"]}>
  <ToggleButton value="1">Button 1</ToggleButton>
  <ToggleButton value="2">Button 2</ToggleButton>
  <ToggleButton value="3">Button 3</ToggleButton>
</ToggleButtonGroup>

To make individual buttons non-interactive, use the disabled flag. Just like with native checkbox fields, this prevents the onChange handler from firing.

<ToggleButtonGroup defaultValue={["1"]}>
  <ToggleButton value="1">Button 1</ToggleButton>
  <ToggleButton value="2" disabled>
    Button 2
  </ToggleButton>
  <ToggleButton value="3">Button 3</ToggleButton>
</ToggleButtonGroup>

• Tab – focuses the active tab item when entering the toggle button group.
• ArrowLeft / ArrowRight – moves focus between toggle buttons in the group.
• Space / Enter – selects the focused toggle button.
• Home – moves focus to the first toggle button.
• End – moves focus to the last toggle button.

• Provide aria-label via attributes when the group doesn't have a visible label.
• Provide aria-label via attributes for each ToggleButton without a text label.