Select

A custom dropdown select with keyboard-friendly interactions, custom arrow icon, and open/selected states.

Default

Favorite Fruit

tsx

<Select
  label="Favorite Fruit"
  options={[
    { value: "apple", label: "Apple" },
    { value: "banana", label: "Banana" },
  ]}
  value={fruit}
  onChange={setFruit}
/>

Pre-selected

Role

tsx

<Select label="Role" value="editor" options={roles} onChange={setRole} />

Disabled

Plan

tsx

<Select disabled label="Plan" value="pro" options={plans} />

Props

Prop	Type	Default	Description	Required
label	`string`	-	Label above the select	No
options	`Array<{ value, label }>`	-	List of selectable options	No
value	`string`	-	Currently selected value	No
onChange	`(value: string) => void`	-	Callback when selection changes	No
placeholder	`string`	"Select an option"	Text shown when no value is selected	No
disabled	`boolean`	false	Disables the select	No

Usage Guidelines

Use Select when there are 4+ options. For 2-3, consider radio buttons or toggle.
Always provide a descriptive placeholder when no default is selected.
The dropdown closes on outside click for a clean experience.
Custom arrow rotates to indicate open/closed state.