Get startedFoundationsComponentsPatternsGuidelinesResourcesAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

Combo box

A combo box lets users make one or more selections from a list using text input, the keyboard, or the mouse.

GitHubGitHub logocomponents/combo-box
StorybookStorybook logocomponents/combo-box
DesignUsageAccessibilityUpdates

Purpose

Search within a list

When a dropdown has many options, a combo box lets users type to filter — saving them from scrolling through long lists.

Balance flexibility and constraint

Users can narrow down options by typing, but selections are still constrained to valid values — reducing input errors.

Useful for large datasets

Combo boxes are best when the full list is too long to browse comfortably but the user knows roughly what they're looking for.

Anatomy

HousingTransportHealth
1

Input field

2

Listbox

3

Option

Configuration

Default

The combo box combines a text input with a filterable dropdown list.

Housing Transport Health

Renders an input that filters a list of options as the user types. Use when the list is too long to browse but users know roughly what they're looking for.

Playground

BETA
Housing Transport Health

Structure

Housing Transport Health

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: gap-xs under sgds/combo-box means sgds/combo-box/gap-xs.

sgds/combo-box
CategoryComponent tokenSemantic tokenValueGapgap-xssgds/gap/xs8pxSizeicon-size-mdsgds/icon-size/md—Formform-border-width-defaultsgds/form/border-width/default—form-padding-ysgds/form/padding/y—Sizedimension-48sgds/dimension/4848pxOutline Focusoutline-focussgds/outline-focus—Outline Offset Focusoutline-offset-focussgds/outline-offset-focus—

Usage

When to use

  • Use this component to collect or change a specific piece of information in a predictable way.
  • Use it when the SGDS control matches the type of response users need to provide.

When not to use

  • Do not use this component when another SGDS control would reduce effort or make the choice clearer.
  • Do not ask for more information, options, or steps than users need at that point in the task.

Best practices

Housing Transport Health
Keep the input clear

Use clear labels, predictable values, and a single obvious action for the control.

Housing Transport Health Housing Transport Health
Do not increase input effort

Too many repeated controls or unclear prompts make form completion slower and less confident.

Accessibility considerations

Built-in accessibility

  • Combo boxes combine an input with a selectable list of options.
  • The component emits input, change, focus, blur, and select events for application state.

Labels and content

  • Use clear placeholder or label text that tells users what to search for.
  • Keep option labels short and unique enough to recognise when filtered.

Focus and interaction

  • Users should be able to type in the field and move to filtered options.
  • Return users to a predictable point in the flow after a selection is made.

Keyboard interaction

KeyInteractionTabMoves focus from the combo box to the next focusable element.Shift+TabMoves focus to the previous interactive element.↓ Downor↑ UpOpens the combo box menu or moves focus between available options.EnterActivates the focused focused option.EscCloses the open combo box when supported by the component.BackspaceRemoves the last selected item when multi-select is enabled and the input is empty.

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for combo boxPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #design-system-feedback

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/combo-box

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.