Select

Forms · src/components/Select/Select.tsx

Pick one value from a list.

Under about seven visible options a set of Radios is easier to compare. For a list long enough to need searching, that is Combobox.

The list variant is the select-only combobox pattern: focus stays on the button and the active option is announced through aria-activedescendant, because moving real focus into the list would take it away from the control the person is operating. It flips upward when there is not room below, measured off the live rectangle rather than assumed.

Import

import { Select } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
options	Array<SelectOption | string>	Options, or bare strings when value and label are the same.
value	string | number
defaultValue	string | number
placeholder	string	Shown when nothing is chosen, as a disabled first option. Not a label.
size	'sm' | 'md' | 'lg'
name	string	Submitted name. In the list variant a hidden input carries it.
disabled	boolean
invalid	boolean
native	boolean	Use the platform's own dropdown. Right for a long list on a phone, and for a form that has to work with JavaScript off.
onChange	(event: unknown, option?: SelectOption) => void

Also accepts everything on FieldShellProps.

Exported types

SelectOption