Autocomplete
Form
Asynchronous search input with debounced queries, virtual scrolling for large datasets, and keyboard-driven selection
Basic Examples
Default
With Helper Text
Select your favorite fruit from the list
Required
With Error
Please select a fruit
Disabled
Loading
Sizes
Small
Medium (Default)
Large
Variants
Default
Filled
Outlined
Ghost
Glass
Primary
Success
Warning
Error
Advanced Features
With Icons & Descriptions
With Avatars
Grouped Options
With Debounce (500ms)
Input is debounced by 500ms
Minimum Characters (3)
Type at least 3 characters to search
Max Options (3)
Shows maximum 3 results
Free Solo (Custom Input)
You can type custom values
No Clear Button
Custom Start Icon
End Icon Position
Async Loading
Simulated async loading
Composable API
Basic Composable
Custom Composable
Real-world Examples
Search Bar
User Selector
Location Search
Company Search
Usage Guidelines
When to Use
- Search with suggestions
- Large option lists
- API-driven selection
Accessibility
- Screen reader announces suggestions
- Keyboard navigation through options
Performance
- Virtual scrolling for large datasets
- Debounced API calls
Common Mistakes
- Not handling empty results
- No loading state for async
Frequently Asked Questions
Yes, Autocomplete supports debounced async queries with loading states for fetching from APIs.
Yes, Autocomplete allows custom rendering for both options and selected values.
Related Components
View allCheckbox
Accessible checkbox input with indeterminate state support and form integration
CheckboxGroup
Accessible CheckboxGroup for multi-selection, and form integration
ColorPicker
Color selection component with preset colors, HEX/RGB/HSL input, and visual picker interface
Combobox
Hybrid input combining text search with dropdown selection, supporting filtering, custom rendering, and creation flows