Combo Box
This component is used when you require users to make one or more selections from a list.
General
Example
Default combo box
<body>
<div style="height:100px;">
<cgds-combo-box
label="Items" hinttext="" name="undefined" placeholder="ComboBox" value="" close="default"
menulist="[
"Apple",
"Pear",
"Durian"]">
</cgds-combo-box>
</div>
</body>
Anatomy
- Text label: Inform users of what data should be put into the field, labels must always be outside the text field
- Hint text: Serve to guide to the user, helping to inform users as to what kind of data they are required to enter
- Option text: Options on what you want users to select
- Dropdown icon: A combo box has a chevron-down icon to the right of the text label to indicate that it will toggle content
Spacing
Within the combo box
Ensure that there is a min of 8px vertical spacing and 16px horizontal spacing on the left and right
Usage guidelines
Combo box should be used when:
- Displaying multiple related options with a common parent context
- You have a large list of choices and need to save space in your interface
Combo box should not be used when:
- Displaying a 'yes' or 'no' selection. Instead, use radio buttons.
Usability guidelines
Ensure that the labels are clear and direct
This will allow users to understand the purpose of the selection.
Labels are outside the combo box
Labels should be above or next to the combo box, so they remain visible at
all times.
Use a default option whenever possible
This could be an option such as "Any".
Use the empty selection if a default option does not make sense.
