Motion UIComponentsComponent

Segmented toggle

A segmented control whose selection pill slides between options on a snap spring.

npx shadcn@latest add @motion/segmented-toggle
Install guideMotionScore

API reference

Components

<SegmentedToggle />

Segmented toggle root with a shared sliding pill.

value

T

Currently selected option value (controlled).

onChange

(value: T) => void

Called when a new option is selected.

ariaLabel?

string

Accessible name for the role="group" container.

layoutId?

string

Override the shared pill's layoutId.

className?

string

Merged onto the segmented shell.

children?

ReactNode

SegmentedToggleOption children.

<SegmentedToggleOption />

One option of a SegmentedToggle.

value

string

This option's value.

children?

ReactNode

Option label and extra content.

className?

string

Merged onto the option <button>.

Featured in

See the segmented toggle composed into full sections.

Pricing tiersAn example of an animated pricing section with a monthly to yearly toggle and prices that morph digit by digit in Motion for React.