Select

A single-choice listbox with keyboard exploration and native form submission.

Interactive preview

Live specimenTry the component

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add select

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Field label="Priority">
  <Select name="priority" value={priority} onValueChange={setPriority}
    options={[{ value: 'normal', label: 'Normal' }, { value: 'high', label: 'High' }]} />
</Field>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`options`	`SelectOption[]: value, label, description?, disabled?, group?, keywords?`	`required`
`value / defaultValue / onValueChange`	`string / string / (string) => void`	`''`
`open / defaultOpen / onOpenChange`	`boolean / boolean / (boolean) => void`	`false`
`size / placeholder`	`sm \| md \| lg / string`	`md / Choose an option`
`name / form / required / disabled / readOnly`	`native form contracts`	`optional / false`
`loading / loadingMessage / emptyMessage`	`boolean / string / string`	`false / Loading options… / No options found.`

Accessibility

Select-only combobox with an original listbox. Focus stays on the button; aria-activedescendant identifies the explored option. Arrow keys open/navigate enabled options, Home/End explore edges, buffered typeahead finds labels, Enter/Space commits. Escape/Tab close without committing an explored option. A visually hidden native select submits the committed value, supports required validation, autofill change and form reset; validation focuses the visible control and shows an error. Controlled values remain consumer-owned during reset. Label via Field, aria-label or aria-labelledby. Options require unique non-empty values and labels; disabled options cannot be selected. Only single selection, no virtualization or async fetching engine. Native button attributes/ref are forwarded; value/defaultValue/onValueChange belong to this component.