Component

Select

A native dropdown wrapped in the same shell as the text input, same border, fill, radius, and focus halo, with a chevron indicating it opens a list of options.

Standalone

select.tsx

<NativeSelect
  options={[
    { label: "USD", value: "usd" },
    { label: "EUR", value: "eur" },
    { label: "GBP", value: "gbp" },
  ]}
  value={value}
  onValueChange={setValue}
/>

Example

A currency select sitting beside an amount input on the same form, the constrained choice next to the free-entry value.

250.00

select-example.tsx

<NativeSelect options={currencyOptions} value={currency} onValueChange={setCurrency} />
<NativeInput value={amount} onValueChange={onAmountChange} />

Capabilities

Prop	Type	Description
optionsrequired	NativeSelectOption[]	-
valuerequired	string	-
onValueChangerequired	(value: string) => void	-
placeholder	string	Unused for native `<select>` - add a “Select…” row in `options` instead.
size	NativeSelectSize	-
disabled	boolean	-
className	string	-
surface	NativeSelectSurface	-
name	string	-
onBlur	React.FocusEventHandler<HTMLSelectElement>	-
selectProps	Omit<	Extra attrs merged onto the native `<select>` (before controlled props).