💠 Combobox
Autocomplete input and command palette with a list of suggestions.
Usage
The Combobox component is an enhanced input field that provides users with auto-completion functionality as they type.
It combines a text input with a dropdown list of suggestions, allowing users to quickly complete their entry or choose from a range of options.
This component is ideal for fields that require precise input and also benefit from suggestions, such as search bars or data entry fields with predefined options.
When to use
- Search interfaces: Use a Combobox for search fields where you want to provide users with instant suggestions based on their input.
- Data entry: Employ a Combobox in forms where users need to input data from a defined set of values, such as tagging systems or categorization features.
- Command execution: Utilize a Combobox as a command palette that offers a list of actions or shortcuts for power users.
- User-friendly input: A Combobox can be used to make data entry more user-friendly by reducing typing and input errors, especially when dealing with long or complex items.
Avoid using a Combobox for simple binary choices or when only a handful of options are available; simpler form elements like radio buttons or toggles may be more appropriate. Ensure that the Combobox doesn't overwhelm users with too many suggestions at once, as this can make the interface cluttered and the user experience confusing.
About
The Combobox is built using a composition of the <Popover /> and the <Command /> components.
See installation instructions for the Popover and the Command components.
Examples
Default
Useful links
Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager: