Toggle Group

A set of Toggles sharing one value, with arrow-key navigation.

When to use

Use when: Choosing one or several options shown as buttons, such as text alignment.
Avoid when: The options need labels longer than a word; use Radio Group.

Installation

bunx shelf add toggle-group

The source lands in src/components/ui/toggle-group.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import { Toggle } from "@/components/ui/toggle";
import { ToggleGroup } from "@/components/ui/toggle-group";

<ToggleGroup aria-label="Alignment" defaultValue={["left"]}>
  <Toggle value="left" aria-label="Align left"><AlignLeftIcon /></Toggle>
  <Toggle value="center" aria-label="Align center"><AlignCenterIcon /></Toggle>
</ToggleGroup>

Examples

Multiple

Several options can be on together, such as text formatting.

Outline

Outline Toggles with text labels, as a segmented control.

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.