Combobox component
Combobox is an input that enables users to filter a list of options and select one or more values.
My role was to improve the Combobox component within the Design System to be a more adaptable component that can be utilised across all MYOB platforms.
Anatomy
The combobox component consists of an input and dropdown that can be composed of various content, and a show more summary that can be utilised for long dropdown lists.
1 – Input
A text input that activates a dropdown displaying a list of items. A user can click or type directly into the input to search for an item in the list.
2 – Dropdown
The dropdown shows a list of items that can be selected or deselected. The list can be composed of various content and the height of the dropdown is flexible with a 60vh max-height.
3 – Dropdown list item
An individual option that can be selected or deselected.
4 – Show more summary
The show more summary gives the user instant feedback on the amount of items that have been found. This should be used when there is 50+ items in the dropdown.
Component in product
Design system components
