Segmented toggle
A segmented control whose selection pill slides between options on a snap spring.
API reference
Components
<SegmentedToggle />
The segmented toggle root: a controlled role="group" that owns the shared sliding pill and the theme-timed slide, and lays its options out as a bordered segmented shell. Renders a single container element whose base look is a bg-card pill row; extend it with className.
value
The currently selected option's value (controlled).
onChange
Called with the newly selected option's value when an option is pressed.
ariaLabel?
Accessible name for the role="group" container (e.g. "Billing period"). Strongly recommended - a segmented group with no label is opaque to screen-reader users.
layoutId?
Override the shared pill's layoutId. Defaults to a per-instance id, so two toggles on one page never share a pill. Set this only if you need a stable id across remounts.
className?
Merged onto the segmented shell - extend the default bordered bg-card container (widths, a w-full stretch) here.
children?
The SegmentedToggleOption children.
<SegmentedToggleOption />
One option of the toggle: Base UI's Toggle (a real <button aria-pressed> with Arrow-key navigation from the group) timed by the theme's snap colour transition, carrying the shared sliding pill when it is the selected value. Must be rendered inside a SegmentedToggle.
value
This option's value. When it matches the group's value the option is selected and carries the sliding pill.
children?
The option's content: its label, plus any extra content that rides in the segment (a "Save 20%" highlight, a small icon). Content is yours - the component owns only the choreography and the segment styling.
className?
Merged onto the option <button>.
Featured in
See the segmented toggle composed into full sections.
