Select
A flexible dropdown select with single, multi, grouped, searchable, and creatable modes.
Usage
Advanced Select Component
With Async Search, Createable Options & Compound Components
Basic Single Select
Static
Selected: apple
Multi Select
Tags
reactnextjs
Selected: ["react","nextjs"]
Async Search
Search users from simulated API
API
Selected: none
Createable Select
Create new options via API
New!
Selected: none
Createable Multi Select
New!
typescript
Selected: ["typescript"]
Async + Createable
Search products and create if not found
Combined
Selected: none
Error State
This field is required
import Select from "@/components/ui/select"
// Single
<Select options={fruits} placeholder="Pick one…" searchable clearable />
// Multi
<Select options={techs} multiple placeholder="Choose…" />Features
- Single and multi-select modes
- Searchable dropdown with keyboard navigation
- Grouped options with section headers
- Creatable — let users add new options on the fly
- Async — load options from an API with debounce
- Error, disabled, and loading states
- Custom sizes (
sm,md,lg) and variants (default,outline,filled)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | SelectOption[] | [] | Available options |
value | string | number | null or (string | number)[] | — | Controlled value |
onChange | (val) => void | — | Change handler |
multiple | boolean | false | Enable multi-select |
placeholder | string | "Select..." | Placeholder text |
size | 'sm' | 'md' | 'lg' | 'md' | Trigger size |
variant | 'default' | 'outline' | 'filled' | 'default' | Visual variant |
searchable | boolean | false | Show search input |
clearable | boolean | false | Show clear button |
creatable | boolean | false | Allow creating options |
disabled | boolean | false | Disable interaction |
error | boolean | false | Show error styling |
errorText | string | — | Error message |
label | string | — | Accessible label |
maxSelected | number | — | Max selections (multi only) |
SelectOption
interface SelectOption {
label: string;
value: string | number;
disabled?: boolean;
icon?: React.ReactNode;
description?: string;
group?: string;
}