Search within a list
Use combo box when users need to filter a longer list of options.
A combo box lets users make one or more selections from a list using text input, the keyboard, or the mouse.
Use combo box when users need to filter a longer list of options.
Users can type to narrow options while still selecting valid values.
Use single or multi-select modes based on the question.
Label
Value (Placeholder text/Filled text)
Input container
Option label
Secondary text (optional)
Menu (dropdown)
Add hint text to the combo box to clarify what users are searching for.
The default. Use when the label alone is enough.
Use placeholder text to suggest the kind of value the user can search for.
Empty input with no helper text inside.
Combo boxes can accept a single value or multiple values through checkbox items. In multi-select, selected values wrap within the same field width and the control grows vertically as needed.
User picks one option; selecting another replaces the first.
Disable the combo box so its value cannot be changed.
Default interactive state.
Show error styling and a feedback message when the input is invalid.
No feedback shown.
Clearable combo boxes let users remove the selected value without deleting text manually.
Use clearable when users commonly need to reset a selected value.
Use loading and empty async menu states when combo box options are retrieved after the user searches.
Use loading while options are being fetched.
Multi-select selections can use full-width badges when labels need to align in a stacked layout.
Use the default badge width for short selected labels.
Individual combo box items can be disabled when an option is unavailable.
Use available options for selectable values.
Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.
sgds-form-padding-y—sgds-gap-xs8pxsgds-form-border-width-defaultWidth variessgds-dimension-4848pxsgds-icon-size-md—sgds-outline-focus—sgds-outline-offset-focus—Use combo box when the list is long enough that typing helps users reach an option faster than scrolling.
For a small number of options, use a simpler control such as radio buttons or select instead.
Keep the visible label specific, and use hint text to clarify what users can search for.
Placeholder text disappears once users type. Keep the field label visible so the purpose stays clear.
Use option labels that match the words users are likely to type so filtering stays reliable.
Combo box is for filtering and selecting from provided options. For custom values, use a text input.
TabShift+Tab↓ Downor↑ UpEnterEscBackspaceShare them with us on Slack → #ask-sgds-v3
Report it on GitHub Issues → sgds/components/combo-box
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.