Select
A dropdown selection component with search filtering, multi-select with checkboxes, grouped options, custom option rendering, and keyboard navigation. Supports 3 variants and 3 sizes.
Live Preview
Interact with the Select component in real time. Toggle features and adjust variant and size to see changes instantly.
1<Select2options={fruitOptions}3variant="default"4size="md"5label="Select a Fruit"6placeholder="Choose a fruit..."7value={value}8onChange={setValue}9/>Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the Select component and its types into your file.
import { Select } from '@/components/aidash/select';
import type { SelectOption, SelectGroup } from '@/components/aidash/select';Basic Usage
The simplest way to use the Select with a flat list of options.
1const fruitOptions: SelectOption[] = [2{ value: 'apple', label: 'Apple' },3{ value: 'banana', label: 'Banana' },4{ value: 'orange', label: 'Orange' },5{ value: 'grape', label: 'Grape' },6{ value: 'mango', label: 'Mango' },7];8 9<Select10options={fruitOptions}11label="Favorite Fruit"12placeholder="Choose a fruit..."13value={value}14onChange={setValue}15import { HugeiconsIcon } from '@hugeicons/react';16import { Home01Icon, Settings01Icon, UserIcon, BellIcon, PencilEdit01Icon, Cursor01Icon } from '@hugeicons/core-free-icons';17/>Variants
Three visual variants for different design contexts and surface treatments.
1<Select options={options} variant="default" label="Default" placeholder="Surface with border" />2<Select options={options} variant="filled" label="Filled" placeholder="Sunken background, no border" />3<Select options={options} variant="outlined" label="Outlined" placeholder="Transparent, 2px border" />default for standard forms, filled on elevated surfaces, and outlined when you need stronger visual emphasis.Sizes
Three sizes to fit different layout contexts, from compact to spacious.
1<Select options={options} size="sm" label="Small" placeholder="Compact — h-8" />2<Select options={options} size="md" label="Medium" placeholder="Default — h-10" />3<Select options={options} size="lg" label="Large" placeholder="Spacious — h-12" />Searchable
Enable search filtering to quickly find options in long lists.
1<Select2options={countryOptions}3searchable4label="Country"5placeholder="Search countries..."6value={value}7onChange={setValue}8/>Clearable
Add a clear button to reset the selection with a single click.
Click the X button to clear your selection
1<Select2options={fruitOptions}3clearable4label="Favorite Fruit"5placeholder="Select a fruit..."6helperText="Click the X button to clear your selection"7value={value}8onChange={setValue}9/>Multiple Select
Allow users to select multiple options with checkboxes.
You can select multiple items
1const [value, setValue] = useState<string[]>([]);2 3<Select4options={fruitOptions}5multiple6clearable7label="Select Fruits"8placeholder="Pick your favorites..."9value={value}10onChange={setValue}11/>Grouped Options
Organize options into labeled groups for better discoverability.
1const groupedOptions: SelectGroup[] = [2{3 label: 'Fruits',4 options: [5 { value: 'apple', label: 'Apple' },6 { value: 'banana', label: 'Banana' },7 { value: 'orange', label: 'Orange' },8 ],9},10{11 label: 'Vegetables',12 options: [13 { value: 'carrot', label: 'Carrot' },14 { value: 'broccoli', label: 'Broccoli' },15 { value: 'spinach', label: 'Spinach' },16 ],17},18];19 20<Select21options={groupedOptions}22label="Food Category"23placeholder="Select a food..."24value={value}25onChange={setValue}26/>With Icons
Add icons to options for enhanced visual identification.
1const iconOptions: SelectOption[] = [2{ value: 'home', label: 'Home', icon: <HomeIcon /> },3{ value: 'settings', label: 'Settings', icon: <SettingsIcon /> },4{ value: 'profile', label: 'Profile', icon: <UserIcon /> },5{ value: 'notifications', label: 'Notifications', icon: <BellIcon /> },6];7 8<Select9options={iconOptions}10label="Navigate To"11placeholder="Select a page..."12value={value}13onChange={setValue}14/>Error & Helper Text
Display validation errors and helper information below the select.
With Helper Text
This will be added to your weekly delivery
With Error
Please select at least one option
1{/* With helper text */}2<Select3options={options}4label="Preferred Fruit"5helperText="This will be added to your weekly delivery"6value={value}7onChange={setValue}8/>9 10{/* With error */}11<Select12options={options}13label="Required Field"14placeholder="You must select one..."15error="Please select at least one option"16/>Disabled State
Prevent interaction with the select when it is disabled.
Disabled Select
Disabled Options
Archived and Deleted options are disabled
1{/* Disabled entire select */}2<Select3options={options}4disabled5label="Fruit"6placeholder="Cannot interact..."7/>8 9{/* Individual disabled options */}10const options: SelectOption[] = [11{ value: 'active', label: 'Active' },12{ value: 'pending', label: 'Pending' },13{ value: 'archived', label: 'Archived', disabled: true },14{ value: 'deleted', label: 'Deleted', disabled: true },15];16 17<Select options={options} label="Status" />Accessibility
Built-in accessibility features for ARIA roles, keyboard navigation, and focus management.
ARIA Combobox Role
The trigger element uses role="combobox" with aria-expanded and aria-haspopup="listbox" for proper screen reader announcements.
Keyboard Navigation
Arrow Down/Up to navigate options,Enter to select,Escape to close the dropdown. Arrow Down opens the dropdown when closed.
Focus Management
The component is focusable via tabIndex. When searchable is enabled, the search input receives focus automatically when the dropdown opens. Disabled state removes the component from the tab order.
Click Outside
The dropdown automatically closes when clicking outside the component, with proper event listener cleanup on unmount.
1Arrow Down → Open dropdown / Move to next option2Arrow Up → Move to previous option3Enter → Select highlighted option4Escape → Close dropdown5Tab → Focus / Blur the selectAPI Reference
Complete list of props accepted by Select.
| Prop | Type | Default | Description |
|---|---|---|---|
| options | SelectOption[] | SelectGroup[] | — | Array of options or grouped options to display |
| placeholder | string | 'Select...' | Placeholder text when no value is selected |
| disabled | boolean | false | Disable the select component |
| searchable | boolean | false | Enable search/filter input within the dropdown |
| clearable | boolean | false | Show a clear button to reset selection |
| size | 'sm' | 'md' | 'lg' | 'md' | Size of the select trigger (height, font, padding) |
| variant | 'default' | 'filled' | 'outlined' | 'default' | Visual style variant of the select trigger |
| error | string | — | Error message to display below the select |
| label | string | — | Label displayed above the select |
| helperText | string | — | Helper text displayed below the select |
| multiple | boolean | false | Enable multi-select mode with checkboxes |
| value | string | string[] | — | Controlled value (string for single, string[] for multiple) |
| onChange | (value) => void | — | Callback when selection changes |
| renderOption | (option: SelectOption) => ReactNode | — | Custom render function for each option |
| className | string | '' | Additional CSS classes on the wrapper |
SelectOption Interface
| value | string | Unique identifier for the option |
| label | string | Display text for the option |
| disabled? | boolean | Disable this individual option |
| icon? | ReactNode | Icon rendered before the option label |
SelectGroup Interface
| label | string | Group heading label |
| options | SelectOption[] | Array of options within this group |
multiple is true, value becomes string[] and onChange receives (value: string[]) => void. TypeScript will enforce the correct types automatically via discriminated union.Related
Other components that work well alongside Select.