Option Wheel
An iOS style picker drum. Scroll, drag or use the arrow keys; rows tilt away from the center and it settles on the nearest one.
import { OptionWheel } from "pleate/effects/option-wheel";City picker
- Amsterdam
- Berlin
- Lisbon
- Madrid
- Milan
- Oslo
- Paris
- Prague
- Rome
- Vienna
- Zurich
Flying to Milan
Props
- options
Rows.
string[]- value / defaultValue
Selected index.
numberdefault 0- onChange
Called when it settles.
(index) => void- itemHeight
Row height (px).
numberdefault 40- visible
Rows above and below center.
numberdefault 3
Accessibility
- A listbox with aria-activedescendant on the centered option.
- Up, Down, Page Up, Page Down, Home and End move the selection.