Advanced select component with support for rich content, multi-line options, icons, search, multi-select, and custom renderers. Replaces the basic Dropdown for complex use cases.
Physics: Select uses convex shadows creating a raised, pressable appearance. On hover, the component lifts slightly with enhanced shadow. On open (focus), a halo appears around the trigger while the dropdown menu floats above with its own shadow layer.
Options can contain any React content including icons, badges, and formatted text.
Support for variable height options with multiple lines.
Enable search filtering for long option lists. Users can type to filter options.
Allow selecting multiple options. Selected items display as chips.
| Prop | Type | Default | Description |
|---|---|---|---|
options | SelectOption[] | required | Array of options with value, label, and optional triggerLabel |
value | T | T[] | - | Currently selected value(s) |
onChange | (value, option) => void | - | Selection change callback |
placeholder | ReactNode | 'Select...' | Placeholder text when nothing selected |
variant | 'default' | 'error' | 'success' | 'default' | Visual variant styling |
size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
disabled | boolean | false | Disabled state |
clearable | boolean | false | Show clear button when value selected |
multiple | boolean | false | Enable multi-select mode |
multiDisplayMode | 'chips' | 'count' | 'text' | 'chips' | How to display multiple selections |
searchable | boolean | false | Enable search/filter in dropdown |
searchPlaceholder | string | 'Search...' | Placeholder for search input |
creatable | boolean | false | Allow creating new options |
loading | boolean | false | Show loading state |
renderTrigger | (props) => ReactNode | - | Custom trigger renderer for full control |
renderOption | (props) => ReactNode | - | Custom option renderer for full control |