Select

Picking one value from a short set — a filter above a list, a variant switch in settings. A native select: keyboard, screen reader and mobile behaviour for free.

When to use it

A filter above a list with a fixed, short set of values — status, plan, region. The first option is “all”, because a filter is always in some state.
A settings field choosing one of a few named variants that do not change at runtime.
Next to other filters in IngotToolbar — where an intelligible first option stands in for a visible label.

When not to use it

A set you search in — dozens of materials, hundreds of contacts. A native select cannot be searched; such a field asks for its own primitive with search, once it has a requester.
Picking several values at once. A row of independent toggles is IngotCheckbox.
Switching between two or three views of the same screen — that is IngotTabs, not a form control.

Properties

value: string — The current value. Controlled from outside — a filter lives in the screen's state.
onChange: (next: string) => void — The new value on every change.
options: readonly IngotSelectOption[] — The options, in reading order. For a filter the first is “all”.
label: string — A translated aria-label. Required — a filter bar rarely shows a visible label, and without a name a screen reader hears only the value.
disabled: boolean — A disabled select. Defaults to false.
id: string — For screens with a visible <label htmlFor> — the label is then the same text.
className: string — A pass-through class — the screen sets the width, the primitive the look.
testId: string — An anchor for tests. It does not affect the appearance.