Forms

Segmented Control

A compact single-select built on native radios.

stableNo JS requiredBuilt on <input type="radio">hydrateless/segmented.css

A compact single-select control built on native radios under role="radiogroup". The radios give you keyboard navigation and form semantics for free. No JavaScript.

Playground

Live

List Board Calendar

Sizesmmdlg

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
options	{ label: string; value: string }[]	—	The selectable segments.
value	string	—	Controlled value; pair with `onValueChange`.
size	'sm' | 'md' | 'lg'	'md'	Control height and font size.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-surface	Track background.
--hl-bg	Selected segment background.
--hl-radius-md	Corner radius.

Accessibility

• Native radios share a name, so only one segment can be selected at a time.
• Arrow keys move the selection, matching the radio group pattern.

Related

Radio GroupNative radios grouped under role="radiogroup".TabsA tabbed interface with full ARIA roles and keyboard support.