Skip to content
omaris · Learn
Inputs

Picker

The frame a set of wheels sits in: the selection band across the middle, the fade at the top and bottom edges, and — when you give it onconfirm — the cancel/confirm row under them.

Full reference: every prop and when to use it →

Walkthrough

1. Basic

A wheel of dates, in the order this locale writes them. Flick it.

Date of birth
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1926
1927
1928
1929
1930
1931
1932
1933
1934
1935
1936
1937
1938
1939
1940
1941
1942
1943
1944
1945
1946
1947
1948
1949
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036 
<script lang="ts">	import { DatePicker } from 'omaris';​	let date = $state<Date | null>(new Date(2021, 8, 17));</script>​<div class="w-80 max-w-full">	<DatePicker surface="card" title="Date of birth" bind:value={date} monthFormat="short" /></div>

2. Time

AM/PM on the wheels, always; the value underneath stays "14:30", so it sorts and stores without a second format.

Opens at
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
AM
PM

stored as 09:30

<script lang="ts">	import { TimePicker } from 'omaris';​	let opensAt = $state('09:30');</script>​<div class="w-64 max-w-full">	<TimePicker surface="card" title="Opens at" bind:value={opensAt} minuteStep={15} />	<p class="pt-3 text-center text-sm text-muted-foreground">		stored as <code class="font-mono">{opensAt}</code>	</p></div>

3. Columns

Picker is only the frame — the band, the fade and the actions. Put any wheels you like inside it.

Duration
0 hr
1 hr
2 hr
3 hr
4 hr
5 hr
6 hr
7 hr
8 hr
9 hr
10 hr
11 hr
12 hr
0 hr
1 hr
2 hr
3 hr
4 hr
5 hr
6 hr
7 hr
8 hr
9 hr
10 hr
11 hr
12 hr
0 hr
1 hr
2 hr
3 hr
4 hr
5 hr
6 hr
7 hr
8 hr
9 hr
10 hr
11 hr
12 hr
0 hr
1 hr
2 hr
3 hr
4 hr
5 hr
6 hr
7 hr
8 hr
9 hr
10 hr
11 hr
12 hr
0 hr
1 hr
2 hr
3 hr
4 hr
5 hr
6 hr
7 hr
8 hr
9 hr
10 hr
11 hr
12 hr
00 min
05 min
10 min
15 min
20 min
25 min
30 min
35 min
40 min
45 min
50 min
55 min
00 min
05 min
10 min
15 min
20 min
25 min
30 min
35 min
40 min
45 min
50 min
55 min
00 min
05 min
10 min
15 min
20 min
25 min
30 min
35 min
40 min
45 min
50 min
55 min
00 min
05 min
10 min
15 min
20 min
25 min
30 min
35 min
40 min
45 min
50 min
55 min
00 min
05 min
10 min
15 min
20 min
25 min
30 min
35 min
40 min
45 min
50 min
55 min
<script lang="ts">	import { Picker, PickerColumn, numberOptions } from 'omaris';​	let hours = $state(1);	let minutes = $state(30);</script>​<div class="w-72 max-w-full">	<Picker surface="card" title="Duration">		<PickerColumn label="Hours" options={numberOptions(0, 12)} bind:value={hours} unit="hr" loop />		<PickerColumn			label="Minutes"			options={numberOptions(0, 55, { step: 5, pad: true })}			bind:value={minutes}			unit="min"			loop		/>	</Picker></div>

4. Sheet

Where a picker belongs on a phone: in a sheet, with the confirm row the onconfirm and oncancel handlers draw for you.

<script lang="ts">	import { Button, DateTimePicker, Sheet, latn } from 'omaris';​	let open = $state(false);	let starts = $state<Date | null>(new Date());	let draft = $state<Date | null>(new Date());​	const format = new Intl.DateTimeFormat(		undefined,		latn({ dateStyle: 'medium', timeStyle: 'short' })	);</script>​<div class="flex flex-col items-center gap-3">	<Button		variant="outlined"		onclick={() => {			draft = starts;			open = true;		}}	>		{starts ? format.format(starts) : 'Pick a time'}	</Button>​	<Sheet bind:open side="bottom" title="Starts">		<DateTimePicker			bind:value={draft}			minuteStep={15}			onconfirm={() => {				starts = draft;				open = false;			}}			oncancel={() => (open = false)}		/>	</Sheet></div>

5. Overridden

Every part is reachable: a full-bleed band in the accent container, a larger face, seven rows deep instead of five.

Weight
40 kg
41 kg
42 kg
43 kg
44 kg
45 kg
46 kg
47 kg
48 kg
49 kg
50 kg
51 kg
52 kg
53 kg
54 kg
55 kg
56 kg
57 kg
58 kg
59 kg
60 kg
61 kg
62 kg
63 kg
64 kg
65 kg
66 kg
67 kg
68 kg
69 kg
70 kg
71 kg
72 kg
73 kg
74 kg
75 kg
76 kg
77 kg
78 kg
79 kg
80 kg
81 kg
82 kg
83 kg
84 kg
85 kg
86 kg
87 kg
88 kg
89 kg
90 kg
91 kg
92 kg
93 kg
94 kg
95 kg
96 kg
97 kg
98 kg
99 kg
100 kg
101 kg
102 kg
103 kg
104 kg
105 kg
106 kg
107 kg
108 kg
109 kg
110 kg
111 kg
112 kg
113 kg
114 kg
115 kg
116 kg
117 kg
118 kg
119 kg
120 kg
121 kg
122 kg
123 kg
124 kg
125 kg
126 kg
127 kg
128 kg
129 kg
130 kg
131 kg
132 kg
133 kg
134 kg
135 kg
136 kg
137 kg
138 kg
139 kg
140 kg
<script lang="ts">	import { NumberPicker } from 'omaris';​	let weight = $state(72);</script>​<div class="w-44 max-w-full">	<NumberPicker		surface="card"		title="Weight"		bind:value={weight}		min={40}		max={140}		unit="kg"		visible={7}		classes={{ band: 'inset-x-0 rounded-none bg-primary-container' }}		columnClasses={{ face: 'text-xl font-semibold' }}	/></div>