Resources
Intro
Input with autocomplete combines text input functionality with dynamic suggestion lists to help users complete entries efficiently.
Use autocomplete inputs when users benefit from suggested options based on their input, e.g. address completion, search suggestions, or selecting from known datasets.
The component uses MDX text input paired with an MDX flyout.
Options & Styles
Suggestions
Suggestions appear dynamically as users type, filtering results based on input text to help users quickly find relevant options.
No Matches
No matches found message appears as an error message inside the flyout when user input doesn't match any available suggestions.
Best Practice & Usage
Auto-complete should provide relevant, filtered suggestions that help users complete tasks efficiently whilst handling cases where no matches are found.
Filter suggestions based on user input to show only relevant matches that help users find what they're looking for.
Limit the number of visible suggestions to prevent cognitive overload and maintain usability.