Segmented control

Example

<fieldset data-slean="segmented">
	<legend>View</legend>
	<label><input type="radio" name="segmented-view" value="day" /> Day</label>
	<label><input type="radio" name="segmented-view" value="week" checked /> Week</label>
	<label><input type="radio" name="segmented-view" value="month" /> Month</label>
	<label><input type="radio" name="segmented-view" value="year" /> Year</label>
</fieldset>

<script lang="ts">
	// Nothing to import: the browser owns the radios. The stylesheet is optional.
	import '@svelte-lean/styles/segmented.css';

	const views = ['day', 'week', 'month', 'year'] as const;
	let view = $state<(typeof views)[number]>('week');
</script>

<fieldset data-slean="segmented">
	<legend>View</legend>
	{#each views as value (value)}
		<label>
			<input type="radio" name="segmented-view" {value} bind:group={view} />
			{value[0].toUpperCase() + value.slice(1)}
		</label>
	{/each}
</fieldset>

Why this implementation exists

A segmented control is a radio group with another look: one choice among a few, one tab stop, the arrow keys to move, a value in the form. Radios sharing a name do all of that natively, with the group named by its <legend> and each segment named by its label.

The stylesheet draws the labels as equal-width segments of one bar. Each radio covers its segment, transparent and focusable, so a click anywhere on the segment checks it; label:has(input:checked) raises the checked segment and label:has(input:focus-visible) draws the keyboard ring on it. There is no element to keep in sync, because the checked state is the radio’s.

Usage

The markup needs no package. Install @svelte-lean/styles for the stylesheet; @svelte-lean/primitives adds the typed contract and nothing at runtime.

npm install @svelte-lean/styles

pnpm add @svelte-lean/styles

yarn add @svelte-lean/styles

bun add @svelte-lean/styles

import '@svelte-lean/styles/segmented.css';

Put data-slean="segmented" on a <fieldset> with a <legend>, and one <label> per choice holding a radio and its text. Give every radio the same name and check one.

Bind the value with bind:group, read it from FormData, or listen to the native change event.

Use it for two to five short choices that take effect at once or are submitted with a form. For panels of content use Tabs; for buttons that are pressed independently use Toggle group.

Anatomy

Runtime profile

Tier 0: the segmented control has no behavior module, the Vite plugin maps segmented to no module, and the native-only fixture proves the path ships no Svelte Lean JavaScript.

Accessibility contract

• The fieldset is a group named by its legend, or by aria-label when the bar has no visible label; each radio is named by its label.
• The group is one tab stop: the checked radio. The arrow keys check the next or previous radio, wrap, and skip disabled ones.
• The focus ring is drawn on the segment of the focused radio, only for keyboard focus (:focus-visible).
• An icon-only segment keeps a text name: aria-label on its input, the icon aria-hidden.
• Forced colors: the checked segment takes the Highlight system color and every segment an outline.

Keyboard

Platform features

Without JavaScript

Fully functional.

Server rendering

The checked attribute renders the initial choice; the raised segment is drawn by CSS from it, before any script runs.

Before hydration

Nothing is attached; the radios work before and after hydration alike.

Styling

segmented.css lays the labels out as equal-width grid columns on a muted bar, raises the checked segment with a surface, a hairline and a small shadow (a ::before inset behind the text), draws the focus ring on that surface, and dims disabled segments. The tokens it reads:

State selectors the stylesheet targets, all from the platform or ARIA: :checked, :disabled, :first-of-type, :focus-visible, :hover, :last-of-type, [type="radio"].

Compatibility notes

Radios and fieldsets are widely available. The checked, focused and disabled segments are selected with :has(), Baseline 2023; where it is missing the radios work and the segments do not show the choice.

Examples

Disabled segments and a hidden label

disabled on a radio dims its segment and the arrow keys skip it; disabled on the fieldset disables the bar. Without a visible legend, the fieldset is named by aria-label.

<fieldset data-slean="segmented" aria-label="Alignment">
	<label><input type="radio" name="segmented-align" value="start" checked /> Start</label>
	<label><input type="radio" name="segmented-align" value="center" /> Center</label>
	<label><input type="radio" name="segmented-align" value="end" disabled /> End</label>
</fieldset>

<fieldset data-slean="segmented" disabled>
	<legend>Density</legend>
	<label><input type="radio" name="segmented-density" value="compact" /> Compact</label>
	<label><input type="radio" name="segmented-density" value="comfortable" checked />
		Comfortable</label>
</fieldset>

Testing

• apps/playground/tests/primitives/forms.spec.ts Playwright: keyboard, form values, :user-invalid, names and descriptions, axe
• packages/styles/tests static checks of the stylesheet (layers, tokens, specificity, dark parity)
• fixtures/native-only consumer build asserting that no behavior runtime ships (invariant A)

Source

• packages/primitives/src/segmented/contract.md the contract in prose: semantics, keyboard, focus, ARIA, SSR, JS-disabled behavior
• packages/primitives/src/segmented/contract.ts typed constants: name, tier, base, parts, options, events
• packages/styles/css/segmented.css the optional stylesheet