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.

The primitive

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 a payment 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).