Searchable Select

Filterable select dropdown with search, clear button, and optional descriptions.

Installation

pnpm dlx shadcn@latest add https://jb.desishub.com/r/searchable-select.json

Usage

import { SearchableSelect } from "@/components/searchable-select";

const [value, setValue] = useState("");
 
<SearchableSelect
  options={[
    { value: "react", label: "React", description: "A JavaScript library" },
    { value: "vue", label: "Vue", description: "Progressive framework" },
    { value: "angular", label: "Angular", description: "Platform by Google" },
  ]}
  value={value}
  onValueChange={setValue}
  placeholder="Select a framework"
  clearable
/>;

Props

Prop	Type	Default	Description
`options`	`SearchableSelectOption[]`	-	Available options.
`value`	`string`	-	Selected value.
`onValueChange`	`(value: string) => void`	-	Called on selection change.
`placeholder`	`string`	`"Select an option"`	Placeholder text.
`emptyMessage`	`string`	`"No results found."`	Message when no search results.
`clearable`	`boolean`	`false`	Show a clear button.
`disabled`	`boolean`	`false`	Disable the select.