Forms

Wheel picker

A spinning wheel of choices, as on iOS: for durations, times and short lists people flick through.

Installation

npx sinaui add wheel-picker

Copy src/lib/ui/WheelPicker.svelte and tokens.css. No dependencies.

Examples

A duration

Two wheels side by side, each with its unit beside the chosen row.

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

	const range = (n: number) =>
		Array.from({ length: n }, (_, i) => ({ value: i, label: String(i) }));
	let hours = $state(0);
	let minutes = $state(25);
</script>

<div class="wheels">
	<WheelPicker label="Hours" items={range(24)} bind:value={hours} unit="hours" />
	<WheelPicker label="Minutes" items={range(60)} bind:value={minutes} unit="min" />
</div>

<style>
	.wheels {
		display: flex;
		gap: 0.5rem;
	}
</style>

Words, not numbers

Any short list works: flick it, or drag.

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

	const cities = ['Baghdad', 'Cairo', 'Córdoba', 'Damascus', 'Isfahan', 'Samarkand', 'Fez'].map(
		(c) => ({ value: c, label: c })
	);
	let city = $state('Córdoba');
</script>

<WheelPicker label="City" items={cities} bind:value={city} />

Props

Prop	Type	Default
`label`	`string`	required
`items`	`{ value, label }[]`	required
`value`	the chosen value (bindable)	required
`unit`	`string`, shown beside the chosen row
`spoken`	`(value) => string`, how it's read aloud	the label

Accessibility

A spin button for screen readers: Up and Down arrows move one row, Page Up and Page Down five, Home and End to the ends.
It snaps to a row, so it never stops between two.