Guidelines
When to use
- For large datasets where users need filtered suggestions as they type.
- When typing is faster and more efficient than scrolling through a static list.
When not to use
- For short or static datasets with no need for filtering. Use Select instead.
- When users must select from a predefined set of options. Use Select instead.
- When complex filtering or multiple input types are required. Use the Filter Chip, Select, or other Form components.
Best practices
- Limit the dataset to improve performance and search speed.
- Ensure clear accessibility by labeling the input field properly.
- Avoid overloading users with too many options or unnecessary features.
Autocomplete vs. Select
- Autocomplete: Best for dynamic or large datasets where users need to filter options as they type. It doesn’t show the full list by default, focusing only on matching options.
- Select: Ideal for static or predefined datasets, displaying all available options in a dropdown.
Use the Autocomplete with large datasets, such as addresses.
The Select is better when dealing with smaller and predefined lists of options.
Behavior
Mouse interactions
- Field: Clicking activates the input field, enabling typing.
- Clear Button: Clicking the Clear Button resets the field by removing the selected option.
- Dropdown Item: Clicking a dropdown item selects or deselects it.
- No matches: If no matches exist, clicking outside the field confirms the entered text as a selection.
Keyboard Interactions
|
Key |
Interaction |
|---|---|
|
Tab |
Sets focus on the field. |
|
Typing |
Expands the dropdown and sets focus on the first item. |
|
Up Arrow / Down Arrow |
Moves focus between dropdown items. |
|
Enter |
Selects or deselects the highlighted item. |
|
Escape |
Closes the dropdown. If text is entered, it becomes the selection. |
|
Left Arrow / Right Arrow |
Moves the cursor character by character. |
|
Backspace |
Deletes typed characters. |
|
Ctrl or Opt + Left Arrow / Right Arrow |
Moves the cursor to the beginning or end of the text. |
Overflow
- Field: Text truncates when content doesn’t fit.
- Dropdown Menu: If the content exceeds the maximum height set for the dropdown, it scrolls automatically.
- Dropdown Item: Adjusts height as needed to ensure visibility.
Searching
Typing
When typing content, the text aligns to the right to maintain visibility.
Loading
A spinner appears on the field to indicate loading content.
No matches
If no matches are found, users can still add the searched term as a custom input.
Layout
Mobile adaptations
- Drawer: On mobile, the dropdown content appears in a Drawer for better usability on smaller screens.
- Label: The label is displayed inside the Drawer for context.
- Search Input: The search input is automatically activated to enable typing inside the Drawer.
- Extra Large size: Use the Extra Large variant for an improved mobile experience.