Toggle Group

Last updated: October 14, 2026

Segmented single or multi selection wrapping Toggle — Astryx Segmented Control inspired.

Installation

npx smoothui-cli add toggle-group

Features

ToggleGroupRoot + ToggleGroupItem on Base UI Toggle Group. Looks like a segmented control (muted track, pressed chip). Supports multiple / type="multiple" for multi-select; value is always a string[].

States

Features

Single-select alignment control.

Multiple

Several items can stay pressed.

Accessibility

Keyboard Interactions

Key	Description
`Arrow` keys	Move focus between items
`Enter` / `Space`	Toggle the focused item
`Tab`	Moves focus into / out of the group

Reduced Motion

Item press scale follows Toggle’s reduced-motion behavior.

Props

motion.dev

base-ui

SmoothUI

Animated React components with smooth Motion animations. Drop-in shadcn/ui compatible.