Skip to main content

Toggle Group

Single-select segmented control with sliding indicator, keyboard arrows, and full-width layout.

Controlled with label

View

Full width

Billing cycle

Small with disabled

Uncontrolled default

Align

Two options

Medium default size

Density

Animation variants

animationVariant — click each control to compare press feedback.

Default
None
Ripple
Scale
Sink
Lift
Pulse
Glow

API

PropRequiredTypeDefaultDescription
themeOptionalSiteThemeatelierVisual theme.
optionsOptionalToggleGroupOption[]value, label, disabled?
value / onChangeOptionalstring + callbackControlled selection.
sizeOptional"sm" | "md"mdItem padding scale.
fullWidthOptionalbooleanStretch items evenly.
labelOptionalstringVisible label and radiogroup aria-label.
animationVariantOptionalPressAnimationVariantdefaultPress animation on each segment — default, none, ripple, scale, sink, lift, pulse, or glow.