Forms

Segmented control

Switches between a few mutually exclusive views or options.

Installation

npx sinaui add segmented

Copy src/lib/ui/Segmented.svelte, glide.ts and tokens.css. No dependencies.

Examples

Basic

Click and the thumb glides; arrow keys snap it.

Text shown

Arabic Latin Side by side

Showing: Side by side

<script lang="ts">
	import Segmented from '#lib/ui/Segmented.svelte';

	let view = $state('both');
	const views = [
		{ value: 'arabic', label: 'Arabic' },
		{ value: 'latin', label: 'Latin' },
		{ value: 'both', label: 'Side by side' }
	];
</script>

<Segmented label="Text shown" options={views} bind:value={view} />
<p class="note">Showing: {views.find((v) => v.value === view)?.label}</p>

<style>
	.note {
		margin: 0;
		color: var(--ui-muted);
	}
</style>

Label for screen readers only

Week Month Year

<script lang="ts">
	import Segmented from '#lib/ui/Segmented.svelte';

	let period = $state('month');
</script>

<!-- When context makes the question obvious, keep the label for screen readers only. -->
<Segmented
	label="Loans in the last"
	hideLabel
	options={[
		{ value: 'week', label: 'Week' },
		{ value: 'month', label: 'Month' },
		{ value: 'year', label: 'Year' }
	]}
	bind:value={period}
/>

Props

Prop	Type	Default
`label`	`string` (required)
`hideLabel`	`boolean`	`false`
`options`	`{ value, label }[]`
`value`	`string`, bindable
`name`	`string`	a unique id
`disabled`	`boolean`	`false`

Accessibility

Native radios in a <fieldset>: one Tab stop, arrow keys and forms need no JavaScript.
Correct before hydration: the chosen segment is raised in the server HTML.
For two to five short options. More than that: a Select.

Key	Action
`Tab`	Moves into the control at the chosen option.
`←` / `→`	Chooses the previous / next option.