Forms

Toggle Group

A set of related toggles with shared styling and keyboard behavior.

BetaNew shared patternRegistry JSON

Alignment

left

Text alignment is a view state. The value is announced through the group.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add toggle-group

Writes components/ui/toggle-group.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

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

Props and composition points for Toggle Group. Native element props pass through.

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	None	One active option or several. Required.
`value / defaultValue / onValueChange`	`string \| string[]`	None	Controlled or uncontrolled selection, shaped by type.
`variant`	`"default" \| "outline"`	"default"	Separated or bordered items. Outline keeps the outer frame.
`size`	`"sm" \| "default" \| "lg"`	"default"	32, 36, or 40 pixel control height.
`ToggleGroupItem value`	`string`	None	Identifies the option. Required, and must be unique.

Dependencies: class-variance-authority, radix-ui, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

In single mode Radix exposes a radiogroup with radio items; in multiple mode each item is a button with aria-pressed.
Arrow keys move between items, and the group is a single tab stop.
Icon-only items need an aria-label. Do not rely on the glyph or the selected fill to explain the action.
Use the group for view state such as alignment or density. For settings that save, use Switch or Checkbox.

The Aback products whose interfaces shaped this component.

This component is new in Aback UI. It has not shipped in an Aback product yet, so no production use is claimed.