Navigation

Segmented Choice Switch

A rounded pill switcher where exactly one option is active and a sliding highlight glides beneath whichever choice is picked.

Using Segmented Choice Switch

A rounded pill switcher where exactly one option is active and a sliding highlight glides beneath whichever choice is picked.

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: size, optionOne, optionTwo, optionThree, highlightColor

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

2226Segmented toggle tabsNavigationA compact pill-shaped segmented control for switching between a small number of short options, with a filled block sliding to whichever segment is selected.

2044Sliding Panel TabsNavigationTwo tabs in a rounded pill track with a highlight that slides between them, crossfading a settings-style panel underneath without any layout jump.

1963Flyout Menu HighlightNavigationA dropdown menu whose items sit under a highlight box that glides from one hovered or focused row to the next, with a nested submenu that flies out to the side.

2361Grouped icon toolbarNavigationA compact horizontal toolbar that clusters icon buttons into groups divided by thin separators, for quick formatting-style actions.

1986Keyboard pill tabsNavigationA two-tab switcher with a pill highlight that glides between labels and full roving-focus keyboard navigation between tabs.

2428Shared-Layout Tab SwitchNavigationA row of plain text tabs where a solid pill background slides and resizes to match whichever tab is selected, using spring-driven shared-layout motion.