Select
A dropdown selection component with support for search, grouping, clearing, and validation states.
Basic Example
With Placeholder
With Helper Text
Select the department you work in
Pre-selected Value
Node.js is pre-selected
States
Error State
Please select a country from the list
Disabled State
Required Field
This field is required
Searchable Select
Type to filter options
Clearable Select
Click the X icon to clear selection
Grouped Options
Options are organized by category
Searchable with Groups
Type to search across all categories
Props
| Name | Type | Default | Description |
|---|---|---|---|
label* | string | - | Select label text |
placeholder | string | 'Select an option...' | Placeholder text when no value selected |
value | string | - | Controlled value (option value) |
defaultValue | string | - | Uncontrolled default value |
options | SelectOption[] | [] | Array of options (value, label, disabled?) |
groups | SelectGroup[] | [] | Array of grouped options (label, options[]) |
searchable | boolean | false | Enable search/filter functionality |
clearable | boolean | false | Show clear button when value selected |
disabled | boolean | false | Whether select is disabled |
required | boolean | false | Whether select is required (shows * indicator) |
error | string | - | Error message to display |
helperText | string | - | Helper text below select |
onChange | (value: string) => void | - | Callback when value changes |
onBlur | () => void | - | Callback when select loses focus |
Usage Guidelines
When to use
- •When users need to choose one option from a list of 5+ items
- •When you need to save vertical space compared to radio buttons
- •For selecting from categorized groups of related options
- •When options need to be searchable or filterable
Best practices
- •Use clear, descriptive labels that indicate what users are selecting
- •Enable search functionality for lists with 10+ options
- •Use groups to organize related options and improve scannability
- •Provide helpful placeholder text that hints at the expected selection
- •Use helper text to provide additional context or instructions
- •Consider making selects clearable when selection is optional
Accessibility
- •Keyboard accessible (Tab, Arrow keys, Enter, Escape)
- •ARIA attributes: aria-invalid, aria-describedby, aria-required
- •Error messages announced with aria-live
- •Focus indicators visible on trigger and options
- •Label properly associated with select
- •Required fields indicated with * and aria-required
- •Search input accessible when searchable enabled
- •Option selection indicated with check icon
- •Grouped options properly labeled with group headers
Do's and Don'ts
✓ Do
- •Use selects for 5 or more options to save space
- •Enable search for long lists to improve user experience
- •Group related options to help users find what they need
- •Provide clear error messages when validation fails
- •Use descriptive labels that clearly indicate what to select
Select your country of residence
✗ Don't
- •Don't use select for 2-4 options - use radio buttons instead
- •Don't use vague placeholder text like "Choose..." or "Select..."
- •Don't hide important options deep in long lists without search
- •Don't disable options without explaining why in helper text
- •Don't use select for actions - use buttons or menus instead
Related Components
Input
For free-form text entry
Radio Group
For selecting from 2-4 visible options
Checkbox
For multiple selections