Combobox
Combobox is an autocomplete input that allows users to filter a list of options and select one or more values.
- Product
- Provet
- Availability
- New Frontend
Usage
This section includes guidelines for designers and developers about the usage of this pattern in different contexts.
Do
- Use when you want to help users select an item from a large list of options.
- Combobox is useful for presenting options when the screen real estate is limited.
- Label combobox clearly so that the user knows what kind of options will be available.
- Order options in an intentional way so it’s easier for the user to find a specific value.
Don’t
- Don't use a combobox if you have less than 6 options to choose from. Consider using select, segmented control or radio components instead.
Content guidelines
Combobox options should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
Avoid unnecessary words and articles in combobox options, such as “the”, “an” or “a”:
Avoid ending combobox options in punctuation:
Avoid all caps for combobox options:
Keep combobox options short:
Integration
This community asset is currently only available to use in the New Frontend for Provet.
Troubleshooting
If you experience any issues while using this community asset, please ask for support in the #vet-frontend Slack channel.