Inputs

Sliding segment toggle

A single-select segmented control where a highlight pill glides beneath the active label whenever a different segment is chosen.

Using Sliding segment toggle

A single-select segmented control where a highlight pill glides beneath the active label whenever a different segment is chosen.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: variant, size, accentColor

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

2002Multi select toggle rowInputsA row of independent toggle buttons, like text formatting options, where any number can stay pressed at once.

2031Segment Spring LabInputsA single-select segmented control for tuning how stiff or loose the spring feels as its highlight glides between segments.

2234Sliding highlight toggle groupInputsA row of icon buttons with a highlight panel that glides beneath the active one, or fades independently behind each active one in multi-select mode.

1932Check draw toggleInputsA square checkbox whose checkmark draws itself stroke by stroke when checked, with a soft press and hover scale.

1934Checkmark draw checkboxInputsA square checkbox that answers a check by drawing a checkmark one stroke at a time, and shows a short dash instead when its state is only partly set.

1951Dot radio listInputsA vertical list of radio options with circular indicators, where selecting one fills it with a dot and clears the rest.