Toggle Group

uistable

Toggle Group — from shadcn/ui (radix-nova style).

npx shadcn add @krawma/toggle-group

npm: class-variance-authority@^0.7.1, radix-ui@^1.6.1 · registry: @krawma/toggle, @krawma/utils

Preview

States

onoffdisabledfocus-visible

Keyboard

EnterSpaceArrowLeftArrowRightHomeEnd

Depends on

toggleutils

Purpose

A set of related toggle buttons acting as one control — single-select (like a segmented control: list/grid, alignment) or multi-select (formatting toolbar).

Anatomy

ToggleGroup (type="single" | "multiple") › one ToggleGroupItem per option (built on toggle).

Style

Inherits toggle's look; the group renders the items as a connected segmented control. Choose variant/size on the group.

Behavior & functionality

type="single": at most one item on (value/onValueChange, string).
type="multiple": any number on (string array).
Controlled or uncontrolled (defaultValue).

Accessibility

Roving focus with arrow keys (single tab stop); Enter/Space toggle; Home/End jump. Each item needs a text label or aria-label; the group should have an accessible name.

Do / Don't

✅ Use type="single" for a segmented control (one active choice).
❌ Don't use single-select toggle-group where a radio-group or tabs is more semantically appropriate (e.g. switching views/panels → tabs).