Select

Inputs

Single-select listbox following the ARIA 1.2 combobox/select-only pattern: DOM focus stays on the trigger while aria-activedescendant walks options. Typeahead included.

import { Select } from "@componentforge/react";

Examples

Grouped options with disabled item

Keyboard: Enter/↓ opens, ↑/↓ walk enabled options, typeahead jumps, Escape cancels.

value: (empty)

Accessibility

Trigger exposes role="combobox", aria-haspopup="listbox", aria-expanded and aria-controls.
Options are role="option" with aria-selected / aria-disabled; disabled options are skipped by arrows and typeahead.
Selected option is announced through the activedescendant relationship.

Keyboard interactions

Key	Action
`Enter / Space / ↓`	Open the listbox.
`↑ / ↓`	Highlight previous / next enabled option.
`Home / End`	First / last enabled option.
`Printable chars`	Typeahead jump (500 ms buffer).
`Enter / Space`	Commit highlighted option.
`Escape / Tab`	Close without committing (Escape refocuses trigger).

API reference

Selected props — every component also spreads native HTML attributes.

Prop	Type	Default	Description
value / defaultValue	string	""	Controlled/uncontrolled selected value.
onValueChange	(value: string) => void	—	Commit handler.
placeholder	string	"Select…"	Shown when no value; doubles as accessible name.
Item.value / Item.label / Item.disabled	string / string / boolean	—	Option config; label falls back to children text.