Select
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.
Select States
Default
Success
Error
Disabled
Default
Selected
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.
Select an option from the dropdown
Current State: default
Best Practices
Do
Use searchable for lists with 7+ options
Choose the current account status
Provide labels and helper text for context
Don't
Don't use Select for 2-3 options—use Radio buttons instead
Don't omit labels—they're essential for accessibility
Examples
Simple String Options
<Select
options={[
{ value: 'active', label: 'Active' },
{ value: 'pending', label: 'Pending' },
{ value: 'suspended', label: 'Suspended' },
]}
placeholder="Select status..."
value={selectedValue}
onChange={(val) => setSelectedValue(val)}
/>Rich Content with Icons
Options can contain any React content including icons, badges, and formatted text.
<Select
options={[
{
value: 'visa-4242',
label: <PaymentLabel icon="visa" last4="4242" />,
triggerLabel: <PaymentTrigger icon="visa" last4="4242" />,
description: 'Expires 12/25',
},
]}
placeholder="Select card..."
/>Multi-line Options
Support for variable height options with multiple lines.
<Select
options={addressOptions}
placeholder="Select address..."
/>Searchable Select
Enable search filtering for long option lists. Users can type to filter options.
<Select
options={countryOptions}
placeholder="Search countries..."
searchable
searchPlaceholder="Type to search..."
/>Multi-Select
Allow selecting multiple options. Selected items display as chips.
<Select
options={tagOptions}
placeholder="Select tags..."
value={selectedTags}
onChange={(val) => setSelectedTags(val)}
multiple
clearable
/>Props Reference
| 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 |