Combo Box

This component is used when you require users to make one or more selections from a list

Example

Default combo box

HTML React Web Component
<head>
  
  <script 
  type="module" 
  src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@1.0.2/components/ComboBox/index.umd.js">
  </script>
</head>
<body>
  <div style="height:100px;">
    <sgds-combo-box 
      label="Items" 
      hinttext="" 
      name="undefined" 
      placeholder="ComboBox" 
      value="" 
      close="default"
      menulist="[
      &quot;Apple&quot;,
      &quot;Pear&quot;,
      &quot;Durian&quot;]"
    >
    </sgds-combo-box>
  </div>
  <!-- Add fluid attribute for full width banner -->
  <!-- 
      <sgds-masthead fluid></sgds-masthead> 
  -->
</body>
View on React storybook View on Web component storybook

Anatomy

Combo Box Anatomy
  1. Text label: Inform users of what data should be put into the field, labels must always be outside of the text field
  2. Hint text: Serve to guide to the user, helping to inform users as to what kind of data they are required to enter
  3. Option text: Options on what you want users to select
  4. 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

Combo Box 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.


Last updated 28 November 2023
Home


Latest version 2.2.0