Select

Custom dropdown with keyboard navigation, search, multi-select, option groups, and smart positioning.

Playground

label

placeholder

size

searchable

clearable

disabled

rounded

<Select
  options={options}
  placeholder="Choose a fruit..."
/>

Single selection with a placeholder.

Favourite fruit

Show a search input inside the dropdown.

Enable multiple option selection.

Group options with the group key.

CategoryPlease select a category

API

Property	Type	Default	Description
`options`*	`SelectOptionOrGroup[]`	—	Array of options or option groups. Each option: { value, label, disabled? }
`value`	`string \| number \| (string \| number)[]`	—	Controlled value. Array when multiple is true
`defaultValue`	`string \| number \| (string \| number)[]`	—	Initial value for uncontrolled usage
`onChange`	`(value) => void`	—	Called when selection changes
`multiple`	`boolean`	false	Enable multi-select mode
`searchable`	`boolean`	false	Show a search input inside the dropdown
`clearable`	`boolean`	false	Show a clear button when a value is selected
`placeholder`	`string`	"Select..."	Placeholder shown when no option is selected
`disabled`	`boolean`	false	Disable the select
`label`	`string`	—	Label rendered above the trigger
`required`	`boolean`	false	Mark label as required
`error`	`string`	—	Error message below the select
`hint`	`string`	—	Hint text below the select
`size`	`"sm" \| "md" \| "lg"`	"md"	Size preset
`emptyText`	`string`	"No options found"	Empty state message