Select Input

Custom dropdown (no native select). Optional search with debounced filtering. Use value and onChange for controlled usage.

Installation

tsx

import { SelectInput } from "@workspace/ui/components/select-input"

Basic usage

tsx

const options = [
  { value: "a", label: "Option A" },
  { value: "b", label: "Option B" },
  { value: "c", label: "Option C" },
]

<SelectInput
  label="Choose one"
  placeholder="Select..."
  options={options}
  value={value}
  onChange={setValue}
/>

Choose one

Searchable

Set searchable to true to filter options by typing. Search is debounced (300ms).

tsx

<SelectInput
  label="Searchable"
  placeholder="Type to search..."
  options={manyOptions}
  value={searchValue}
  onChange={setSearchValue}
  searchable
  searchPlaceholder="Search options..."
/>

Searchable

Props

Prop	Type	Default	Description
label	string	-	Label above the select.
error	string	-	Error message shown below.
hint	string	-	Hint text below.
placeholder	string	-	Placeholder when no value selected.
options*	SelectOption[]	-	Array of { value, label }.
value	string	-	Controlled value.
onChange	(value: string) => void	-	Called when selection changes.
searchable	boolean	false	Show search in dropdown (debounced 300ms).
searchPlaceholder	string	-	Placeholder for search input.
containerClassName	string	-	Classes for the wrapper.
selectClassName	string	-	Classes for the trigger.