Combo Box
This component is used when you require users to make one or more selections from a list
Take note that for Combo Box component, you may use our React version instead. Do check out our SGDS React Storybook for further documentation.
Example
Default combo box
import {
Combobox,
ComboboxProps,
} from '@govtechsg/sgds-react/Combobox';
export const ComboboxComponent = () => {
const menuList = ['apple', 'orange', 'banana'];
return <Combobox menuList={menuList} id="typeaheadExample" icon={<i className="bi bi-search"></i> } />;
};
Anatomy
- Text label: Inform users of what data should be put into the field, labels must always be outside of 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 of the combo box
Labels shouls 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.