Skip to main content

Combo

Combo combines a text-field and listbox to allow any value to be typed or a value to be chosen from a pre-defined set of options.

Example

Default combo

Best practices

Use when the menu of available choices is long and space is constrained.

Do

  • Use when a user needs to be able to enter any value but will also benefit from a set list of options.
  • Place menu items that represent "all" or "none" at the top of the menu, regardless of the sort order of the remaining items.
  • Sort Menus with 12 or more items of text in alphabetical order; numbers in numeric order; and dates in chronological order.
  • If there are less than 12 items, you can sort the menu items in any logical order, such as grouping highly related items together or placing most the common items first.

Don’t

  • If the menu has a small number of items and users would benefit from seeing the items side by side, consider radio or checkboxes components instead.
  • Do not use if the menu contains commands.
  • Do not start the menu or auto fill the text field with select text as you would on a select menu.

Also known as

Combo box
Combo menu
Dropdown

Related

Menu
Text-field
Auto Suggest

Accessibility

  • Use descriptive text, such as "Type text or use the down arrow to select an option" in the aria-label found on the input element.
  • Add role="combobox" to the input for proper screen reader output.
  • Add role="button" to the button for better accessibility.
  • Add role="listbox" to the ul element for better accessibility.
  • aria-expanded should be used in place of aria-hidden (deprecated shape) on the ul element, for proper screen reader output.
  • Add role="option" to the list item elements for better accessibility.
  • These additions will ensure the best accessibility experience.

Options

Autofocus: Set using the autofocus HTML attribute on the input element.

Development

  • JavaScript: Scripting documentation defines how to handle this component through JavaScript.
  • Schema definition: The combo schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default combo inside a web form

<form class="c-combo" name="form1" target="_self" role="combobox" aria-expanded="false">
    <input autocomplete="off" aria-label="Type text or use the down arrow to select an option" type="text" name="comboField" role="textbox" aria-autocomplete="list" aria-controls="exampleComboPopup">
    <button class="c-glyph" name="select">
        <span class="x-screen-reader">Select</span>
    </button>
    <div role="group">
        <ul id="exampleComboPopup" tabindex="0" role="listbox">
            <li role="option">
                <span tabindex="0">dynamics crm</span>
            </li>
            <li role="option">
                <span tabindex="0">dynamics crm clari</span>
            </li>
            <li role="option">
                <span tabindex="0">dynamicus</span>
            </li>
            <li role="option">
                <span tabindex="0">dynamicus qui sequitur est mirum notare quam littera</span>
            </li>
            <li role="option">
                <span tabindex="0">dynamosaurus</span>
            </li>
            <li role="option">
                <span tabindex="0">dynamosaurusraptor</span>
            </li>
        </ul>
    </div>
</form>

Combo outside a web form

<div class="c-combo" role="combobox" aria-expanded="false">
    <input autocomplete="off" aria-label="Type text or use the down arrow to select an option" type="text" name="comboFieldDiv" role="textbox" aria-autocomplete="list" aria-controls="exampleComboPopup2">
    <button class="c-glyph" name="selectDiv">
        <span class="x-screen-reader">Select</span>
    </button>
    <div role="group">
        <ul id="exampleComboPopup2" tabindex="0" role="listbox">
            <li role="option">
                <span tabindex="0">dynamics crm</span>
            </li>
            <li role="option">
                <span tabindex="0">dynamics crm clari</span>
            </li>
            <li role="option">
                <span tabindex="0">dynamicus</span>
            </li>
            <li role="option">
                <span tabindex="0">dynamicus qui sequitur est mirum notare quam littera</span>
            </li>
            <li role="option">
                <span tabindex="0">dynamosaurus</span>
            </li>
            <li role="option">
                <span tabindex="0">dynamosaurusraptor</span>
            </li>
        </ul>
    </div>
</div>