Picker

Mobile-style scroll-wheel column selector: native scrolling + snap alignment delivers inertial feel; selection settles and writes back value, then fires oas-change. Supports independent columns (columns) and cascading trees (options); form-associated for native form integration. Ideal for mobile split-field input, region cascading, and multi-spec selection.

Basic Usage

Pass a JSON array to columns (each { key?, label?, items: [{ label, value?, disabled? }] }); value is the array of selected values per column (value falls back to label):

Two columns + event feedback

Scroll or use arrow keys—oas-change feedback appears here.

Example

Cascade (options tree)

Pass a tree JSON to options (nested children): column count derives from the selection path; changing a parent column rebuilds child columns and resets them to the first enabled item. columns and options are mutually exclusive (columns wins):

Province/City cascade

Switch the province column—the city column rebuilds automatically.

Example

Disabled Items & Whole Disable

An item with disabled: true snaps to the nearest enabled item on settle; whole-component disabled makes the wheels unresponsive:

Disabled snap + whole disable

Example

Sizing

item-height (row height px, default 36) × visible-count (visible rows, default 5, even values round up to odd) sets the wheel height; the selected-row highlight anchors the selected row:

Row height 44 + 3 visible rows

Example

Native Form

Form-associated: with name, FormData submits a JSON array string; form.reset() restores the initial value:

oas-form submit

Submit

Form data appears here after submit.

Example

Touch & Keyboard

• Touch/mouse: native inertial scrolling + snap centering; nearest item highlights live while scrolling; settle commits;
• Keyboard: columns are focusable (role="listbox"); ↑/↓ moves one item, Home/End jumps to first/last enabled item (skips disabled);

API

oas-picker

Attributes

Attribute	Description	Type	Default
columns	Independent column data (JSON array [{ key?, label?, items: [{ label, value?, disabled? }] }]; mutually exclusive with options and takes priority)	—	—
disabled	Whole-component disable (wheels unresponsive, value unchanged)	boolean	—
item-height	Row height in px (positive integer, invalid values fall back to default)	—	—
name	Native form field name (form-associated: the FormData submission key; value is a JSON array string)	—	—
options	Cascading tree data (JSON [{ label, value?, children: [...] }]); column count derives from selection path, parent change rebuilds child columns and resets to first enabled item	—	—
required	Required marker (drives the native valueMissing validation chain: unselected counts as unfilled)	boolean	—
value	Selected values per column (JSON array; item value falls back to label); written back on settle, programmatic writes only scroll without firing events	string[] | string	—
visible-count	Visible row count (≥3, even values round up to odd)	—	—

Events

Event	Description
oas-change	Fired after scroll/keyboard selection settles (not fired on programmatic value writes). detail { value, labels, columnIndex }—value/labels reflect all columns, columnIndex is the changed column