Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Toggle Group examples · Standard

Single Selection Toggle Group for React

An outline toggle group for text alignment where only one option is pressed at a time.

Framework
UI library

Text can't be left-aligned and right-aligned at once, so an alignment control needs one choice at a time. This React example is an outline Toggle Group on Base UI with left, center and right items in single selection mode: pressing center releases left. Use the pattern for alignment, view modes, sort order or any small set of options where only one can be active.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does single selection enforce only one active item?

The group keeps one value. Pressing an item replaces it, so the previously pressed item releases on its own; you don't write any code for that. Single selection is the default: leave out multiple.

What value does single selection return when controlled?

An array with one value, such as ["center"], or an empty array when nothing is pressed; onValueChange gives you the new one.

Can I have a default selected item in single-select mode?

Yes. Pass the starting value, and the group stays uncontrolled after that. Use defaultValue with an array, such as ["left"] (default-value in Vue).

Why use alignment icons instead of text labels?

Alignment icons are familiar from every text editor and fit a compact toolbar. Each item still has an aria-label, such as "Align center", so screen readers announce the option by name. Use text labels when the options aren't widely recognized, like custom view modes.

Can I prevent users from deselecting the last active item?

Yes. By default, pressing the active item again releases it and leaves nothing selected. Control the value and ignore a change to an empty value in the change handler.

How do screen readers announce single-select toggle groups?

The group is one Tab stop and the arrow keys move between the options. Each option is announced with its aria-label and whether it's selected, and the group's aria-label, Text alignment, names the set. The items are announced as toggle buttons, pressed or not.

All 7 toggle group examples