'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Forms
WheelPicker
Scrolling wheels to pick from, like a phone picker: one or several columns, looping columns for hours and minutes, five or more visible rows. Swipe, scroll, click a row or use the arrow keys.
import { WheelPicker } from '@alea/ui';
Examples
WheelPicker
Scrolling wheels like a phone's picker: one or several columns. Swipe or scroll and the middle row is the pick; click a row; or focus a column and use the arrow keys.
1 × Navy, size M
Anatomy
The parts of the component and the class that styles each one.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-border…--alea-surface-deep…--alea-surface-raised…
Space
--alea-space-1…--alea-space-2…
Radius
--alea-radius-lg…--alea-radius-sm…
Component
--alea-wheel-row…
Props
WheelPicker props
Scrolling wheels to pick from, like a phone's picker: one or several columns (hours and minutes, size and color). Swipe, scroll, click a row, or use the arrow keys.
| Prop | Type | Default | Description |
|---|---|---|---|
columnsrequired | WheelColumn<string | number>[] | - | One or more columns side by side. |
aria-label | string | - | Name of the whole picker. |
className | string | - | Extra class names. |
defaultValue | Record<string, string | number> | - | The picked values at first. Default the first item of each column. |
onChange | ((value: Record<string, string | number>) => void) | - | Called with every column's value when one changes. |
rowHeight | number | ROW | Row height in px. Default 40 (44 on touch screens). |
value | Record<string, string | number> | - | The picked value of each column, by column id (controlled). |
visibleRows | number | 5 | How many rows show. Odd numbers center the pick. Default 5. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-wheel.alea-wheel-band
Accessibility
- Each column is a spinbutton named by its label, with the picked value as its text.
- The scrolling wheel is a pointer convenience; the keyboard and screen readers use the spinbutton.
- Rows are at least 44 px on touch screens.
Keyboard
| Key | Does |
|---|---|
| Arrow Up / Down | Previous or next value |
| Page Up / Down | Five values |
| Home / End | First or last value |
| Tab | Next column |
Do and don't
Do
- Use it on touch screens for short lists (sizes, quantities, times).
Don't
- Don't use it for long lists: use Select with search.