Select inputs that combine a concave trigger (Input style) with a convex overlay menu (Elevated style).
The Dropdown component is deprecated for new development. Use the Select component instead, which supports rich content, multi-select, search, icons, and custom rendering.
| Feature | Dropdown | Select |
|---|---|---|
| Basic string options | ||
| Rich content (ReactNode) | ||
| Icons in options | ||
| Multi-line options | ||
| Multi-select | ||
| Searchable / filterable | ||
| Creatable (add new options) | ||
| Option groups | ||
| Loading state | ||
| Custom render functions |
Migrating from Dropdown to Select is straightforward. The main changes are renaming items to options and adjusting the callback signature.
For maintaining existing Dropdown implementations. New development should use Select.
| Prop | Type | Default | Description |
|---|---|---|---|
items | DropdownItem[] | required | Array of selectable items |
value | string | - | Currently selected value |
onChange | (value: string) => void | - | Selection change callback |
trigger | ReactNode | 'Select...' | Placeholder text when no selection |
className | string | - | Additional CSS classes |
| Property | Type | Description |
|---|---|---|
label | string | Display text |
value | string | Unique value identifier |
icon | string | Optional icon name (not rendered in current implementation) |