Time Zone Select
Selects
Source and install need .
pnpm dlx shadcn@latest add @assembli/searchable-selectSearchable Select
A select with a search field inside its popup, on Base UI's Combobox. Results stay grouped and bold the matching text, rows take an avatar or icon plus secondary text, and there's an empty state, a Create row for new entries and async loading with a spinner row. Arrow keys move through results from the search field, Enter picks and Escape closes.
Props
Other props pass through to the root element.
options
Entry[]
Default
[]Options or labelled groups to search locally.
loadOptions
(query: string, signal: AbortSignal) => Promise<Entry[]>
Loads results from a server as the query changes (debounced). Replaces local filtering.
value
string | null
defaultValue
string | null
Default
nullonValueChange
(value: string | null, option: SearchableOption | null) => void
onCreate
(query: string) => SearchableOption | Promise<SearchableOption | void> | void
Adds a "Create '…'" row when nothing matches exactly. Return the new option (or a promise of it) to pick it.
label
React.ReactNode
hint
React.ReactNode
Quiet text to the right of the label, such as "Optional".
description
React.ReactNode
error
React.ReactNode
Replaces the description and marks the trigger
aria-invalid.placeholder
React.ReactNode
Default
"Select…"searchPlaceholder
string
Default
"Search…"emptyMessage
(query: string) => React.ReactNode
Shown when the search finds nothing. Gets the query.
leading
React.ReactNode
A field icon before the value. A picked option's icon or avatar takes its place.
size
SelectSize
Default
"md"disabled
boolean
required
boolean
name
string
Submits the picked value with a surrounding form.
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
debounce
number
Default
250Delay before
loadOptionsruns, in ms. Defaults to 250.triggerClassName
string
Classes for the trigger;
classNamegoes on the root.
| Prop | Type | Default | Description |
|---|---|---|---|
| options | Entry[] | [] | Options or labelled groups to search locally. |
| loadOptions | (query: string, signal: AbortSignal) => Promise<Entry[]> | – | Loads results from a server as the query changes (debounced). Replaces local filtering. |
| value | string | null | – | |
| defaultValue | string | null | null | |
| onValueChange | (value: string | null, option: SearchableOption | null) => void | – | |
| onCreate | (query: string) => SearchableOption | Promise<SearchableOption | void> | void | – | Adds a "Create '…'" row when nothing matches exactly. Return the new option (or a promise of it) to pick it. |
| label | React.ReactNode | – | |
| hint | React.ReactNode | – | Quiet text to the right of the label, such as "Optional". |
| description | React.ReactNode | – | |
| error | React.ReactNode | – | Replaces the description and marks the trigger aria-invalid. |
| placeholder | React.ReactNode | "Select…" | |
| searchPlaceholder | string | "Search…" | |
| emptyMessage | (query: string) => React.ReactNode | – | Shown when the search finds nothing. Gets the query. |
| leading | React.ReactNode | – | A field icon before the value. A picked option's icon or avatar takes its place. |
| size | SelectSize | "md" | |
| disabled | boolean | – | |
| required | boolean | – | |
| name | string | – | Submits the picked value with a surrounding form. |
| open | boolean | – | |
| defaultOpen | boolean | – | |
| onOpenChange | (open: boolean) => void | – | |
| debounce | number | 250 | Delay before loadOptions runs, in ms. Defaults to 250. |
| triggerClassName | string | – | Classes for the trigger; className goes on the root. |
