Combo Box

Example

                
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

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

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.