Autocomplete
Explore interactive examples and all component variations in our Storybook.
The Autocomplete component provides a searchable dropdown input that filters options as the user types. It features keyboard navigation, highlighting of matching text, and flexible positioning.
Basic Usage
With Default Selection
Controlled Component
Input value: ""
Selected: None
With Clear Functionality
Selected: None
Large Dataset Example
Total options: 100
Properties
Autocomplete
| Property | Type | Description |
|---|---|---|
options | Option[] | Array of options to display in the dropdown. Required. |
onSelect | (option: Option | null) => void | Callback fired when an option is selected. Required. |
placeholder | string | Placeholder text for the input field. |
onChange | (value: string) => void | Callback fired when the input value changes. |
defaultSelectedOption | Option | Option that should be selected by default. |
value | string | Controlled input value. |
className | string | Additional CSS classes for the input. |
Option Interface
| Property | Type | Description |
|---|---|---|
value | string | Unique identifier for the option. Required. |
label | string | Display text for the option. Required. |
Ref Methods
The component exposes the following methods via ref:
| Method | Description |
|---|---|
clearSelection() | Programmatically clears the current selection. |
Features
Keyboard Navigation
- Arrow Up/Down: Navigate through options
- Enter: Select the highlighted option
- Escape: Close the dropdown
- Tab: Move focus away and close dropdown
Smart Positioning
The dropdown automatically positions itself above or below the input based on available screen space.
Text Highlighting
Matching text in options is automatically highlighted in bold blue to show search relevance.
Accessibility
- Full ARIA support with proper roles and attributes
- Screen reader compatible
- Keyboard navigation support
- Focus management
Customization
Common Use Cases
The Autocomplete component is perfect for:
- Country/State/City selectors - Geographic location selection with search
- User selection - Choose from a list of users or team members
- Product catalogs - Search and select from product inventories
- Tag selection - Choose from predefined tags or categories
- API endpoint selection - Developer tools for selecting endpoints
- Language/Framework selection - Development environment configuration
- Large datasets - Any scenario with 50+ options that benefit from search
The component handles large datasets efficiently and provides a smooth user experience with intelligent filtering and keyboard navigation.