Forms

Segmented Control

A compact single-select built on native radios.

stableCSS onlyEnhancer: enhanceSegmentedBuilt on <input type="radio">hydrateless/segmented-control.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. Add data-hl-segmented and the optional enhancer reports the selection; with <button> segments instead of radios it also applies the radio-group pattern (role="radio", aria-checked, a roving tab stop, and arrow keys).

Playground

Live

List Board Calendar

Sizesmmdlg

Button segments

When the control drives a view rather than a form value, plain buttons avoid a stray form field. The enhancer turns them into an APG radio group: one tab stop, arrow keys move the selection, and aria-checked marks the active segment. data-hl-value supplies the value.

Live

JavaScript

This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:

import { enhanceSegmented } from '@hydrateless/enhancers/segmented';

const handle = enhanceSegmented(document);
// handle.api  -> imperative controls
// handle.destroy()  -> tear everything down

Props

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

Prop	Type	Default	Description
options	{ label: string; value: string }[]	Not set	The selectable segments.
value	string	Not set	Controlled value; pair with `onValueChange`.
defaultValue	string	Not set	Uncontrolled initially selected value. Defaults to the first option.
onValueChange	(value: string) => void	Not set	Called with the selected value (Vue: `v-model`, Svelte: `bind:value`).
size	'sm' | 'md' | 'lg'	'md'	Control height and font size.

Events and callbacks

Event / Callback	Payload	Description
hl:change	{ value: string }	Fires from an enhanced control with the selected value after every change (also the `onValueChange` callback).

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-2	Track background.
--hl-surface	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.
• Button segments get the same pattern from the enhancer: role="radio", aria-checked, and a single roving tab stop.

Related

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