Select

The single and multi select with keyboard navigation, type-to-search on long lists, and grouped options.

Basic

String options auto-normalize; short lists hide the search field

Pick a fruit

Selected: -

Options with icons + data payload

Object options carry an icon and an arbitrary data payload returned on change

Assign a team

The onChange callback receives the full option, data payload included.

Clearable

A clear affordance appears once a value is set; clearing returns undefined

Cherry

Selected: Cherry

States

error, disabled, and loading (skeleton) surfaces

error

Required

disabled

Apple

Sizes

sm / md / lg share one control scale with the rest of the kit

Small

Medium

Large

Keyboard navigation

Full support from day one: the old select's real a11y gap

Open me and use the keyboard

↑ ↓ move the active row (disabled rows are skipped)
Home End jump to first / last
Enter selects, Esc closes
Typing filters (type-ahead); the active row is announced via aria-activedescendant and scrolled into view

Groups

options carry a group label; adjacent members render under one header (search included)

Pick an ingredient

Long list + deferred search

200 options; the search field auto-appears and filters off a deferred value

Search 200 SKUs

Selected: -

Table toolbar filter

A facet select with per-option counts, the shape FacetBar wires for every single-value facet

All modules

37 of 37 jobs

Required catalog field

Select has no label or message slot of its own; the field hand-builds them and shows the validation error on save

Default catalog *

Choose a catalog

New jobs land here unless you pick another catalog.

Multi-value owner filter

multiple keeps the panel open while you toggle; chips restate every applied value as a removable Chip

Owner · 1

Aakarsh C.

10 of 37 jobs

Jobs toolbar facets

preset="facet" is the toolbar shorthand for multiple, chips, and the sm scale

Module

Status · 1

Failed

7 of 37 jobs

Part type lookup

Options load after a delay; loading renders a skeleton, then the list opens searchable

Looking up PCdb part types...

Export format

Grouped options each keep their own icon; the control shows the picked format's icon closed

Choose an export format

Exporting as: -

Styling slots

Every className the component exposes, and what it reaches

_className: the outer wrapper
className: the control box, the primary element
controlClassName: the selection text inside the control
panelClassName: the floating option list
optionClassName: each row in the list
searchClassName: the in-panel filter input
chipsClassName: the applied-chips row, multiple mode only