Combobox

Comboboxes allows the user to select one item out of a set of predefined options while also allowing text entry - it combines a dropdown with a search. Text entry is used to filter the list of options. It utilises the autocomplete mechanism.

Use when

The user has to select from a large predefined set, where search is needed to find the right option.
The user has to select from a predefined set, but more options can also be added manually.
The possible alternatives should be displayed to guide users towards the right one.
Screen real estate is limited.
It is not vital to see all the options at first sight.

The functionality for this component, i.e. the script, is not provided. The documentation has a demo functionality that you can draw inspiration from in your work.

Design

Single selection

See the filtering data mechanism when the data set is visible before filtering, or autocomplete for common search behaviour.

As soon as the user has started typing in the text field, an "x" icon is shown to remove the typed text and revert suggestions to those shown for an empty search string.

When the combobox is closed, it shows the selected option (if any).

You need to be able to navigate in the dropdown box with the keyboard (in the example is used: 'Arrow Down', 'Arrow Up', 'Page Up', 'Page Down', 'End', 'Home', 'Esc', and for select 'Enter').

Single selection

					

<div class="combobox-wrapper">
    <label for="comboboxInput" id="comboboxLabel" class="combobox-label" aria-label="Select one from the list">Single selection</label>
    <div role="combobox" id="combobox" class="combobox" aria-expanded="true" aria-owns="comboboxList" aria-haspopup="listbox" aria-multiselectable="false">
        <div class="combobox-input">
            <span class="combobox-suggestion" option-selected="opt_5RQi6CK_208" style="text-indent: 0px;">swaziland</span>
            <input type="text" id="comboboxInput" placeholder="Enter selection" value="sw" spellcheck="false" aria-controls="comboboxList" aria-autocomplete="list" aria-activedescendant="">
        </div>
    </div>
    <span class="spinner spinner-xs spinner-default-blue"></span>
    <button type="button" class="clear-btn show" aria-label="Delete selection in input">
        <span class="close"></span>
    </button>
    <button type="button" class="combobox-btn" aria-label="Open country list">
        <span class="vismaicon vismaicon-dynamic vismaicon-autocomplete"></span>
    </button>
    <div class="combobox-dropdown show">
        <ul role="listbox" id="comboboxList" class="combobox-list" aria-labelledby="comboboxLabel" aria-multiselectable="false">
            <li role="option" id="opt_5RQi6CK_41" class="combobox-list-item" aria-selected="false">
                <mark>Sw</mark>eden
            </li>
            ...
            <li role="option" id="opt_5RQi6CK_210" class="combobox-list-item" aria-selected="false">Switzerland</li>
        </ul>
    </div>
</div>

Multiple selection

For the multiple selection the selected option is shown as a pill in the textbox, and after a selection, the combobox remains open.

					

<div class="combobox-wrapper">
    <label for="comboboxInput" id="comboboxLabel" class="combobox-label" aria-label="Select one from the list">Single selection</label>
    <div role="combobox" id="combobox" class="combobox" aria-expanded="true" aria-owns="comboboxList" aria-haspopup="listbox" aria-multiselectable="true">
        <div class="combobox-selected">
            <span class="combobox-selected-label">Austria</span>
            <button type="button" class="clear-btn" aria-label="Delete selected option">
                <span class="close"></span>
            </button>
        </div>
        <div class="combobox-selected">
            <span class="combobox-selected-label">Bahamas</span>
            <button type="button" class="clear-btn" aria-label="Delete selected option">
                <span class="close"></span>
            </button>
        </div>
        <div class="combobox-overflow-wrapper">
            <button type="button" class="combobox-overflow-btn" aria-label="Open overflow selected list">+4 more</button>
            <button type="button" class="clear-btn" aria-label="Delete all the overflow selected options">
                <span class="close"></span>
            </button>
            <div class="combobox-overflow-list">
                <div class="combobox-selected">
                    <span class="combobox-selected-label">Belarus</span>
                    <button type="button" class="clear-btn" aria-label="Delete selected option">
                        <span class="close"></span>
                    </button>
                </div>
                    ...
                <div class="combobox-selected">
                    <span class="combobox-selected-label">Australia</span>
                    <button type="button" class="clear-btn" aria-label="Delete selected option">
                        <span class="close"></span>
                    </button>
                </div>
            </div>
        </div>
        <div class="combobox-input">
            <span class="combobox-suggestion" option-selected="opt_5RQi6CK_208" style="text-indent: 0px;">swaziland</span>
            <input type="text" id="comboboxInput" placeholder="Enter selection" value="sw" spellcheck="false" aria-controls="comboboxList" aria-autocomplete="list" aria-activedescendant="">
        </div>
    </div>
    <span class="spinner spinner-xs spinner-default-blue"></span>
    <button type="button" class="clear-btn show" aria-label="Delete selection in input">
        <span class="close"></span>
    </button>
    <button type="button" class="combobox-btn" aria-label="Open country list">
        <span class="vismaicon vismaicon-dynamic vismaicon-autocomplete"></span>
    </button>
    <div class="combobox-dropdown show">
        <ul role="listbox" id="comboboxList" class="combobox-list" aria-labelledby="comboboxLabel" aria-multiselectable="true">
            <li role="option" id="opt_5RQi6CK_210" class="combobox-list-item" aria-selected="false">
                <span class="vismaicon vismaicon-sm vismaicon-add-circle"></span>
                Switzerland
            </li>
            ...
        </ul>
    </div>
</div>

Combobox with header and footer sections in the dropdown

By adding a wrapper with .combobox-dropdown-header or .combobox-dropdown-footer class inside the .combobox-dropdown will create a header or footer zone, for additional controls.

					

<div class="combobox-wrapper">
        ...
        <div class="combobox-dropdown">
            <div class="combobox-dropdown-header">
                ...
            </div>
            <ul role="listbox" id="comboboxList" class="combobox-list" aria-labelledby="comboboxLabel" aria-multiselectable="false">
                ...
            </ul>
            <div class="combobox-dropdown-footer">
                ...
            </div>
        </div>
</div>

Disabled

For a propper disabled state for the combobox follow the code snippet below (it is recommended to add a disabled attribute to the input as well).

					

<div class="combobox-wrapper">
    <label for="comboboxInput" id="comboboxLabel" class="combobox-label" aria-label="Select one from the list">Single selection</label>
    <div role="combobox" id="combobox" class="combobox disabled" aria-expanded="false" aria-owns="comboboxList" aria-haspopup="listbox" aria-multiselectable="false">
        <div class="combobox-input">
            <span class="combobox-suggestion" option-selected="opt_5RQi6CK_208" style="text-indent: 0px;">swaziland</span>
            <input type="text" disabled id="comboboxInput" placeholder="Enter selection" value="sw" spellcheck="false" aria-controls="comboboxList" aria-autocomplete="list" aria-activedescendant="">
        </div>
    </div>
    <span class="spinner spinner-xs spinner-default-blue"></span>
    <button type="button" class="clear-btn show" aria-label="Delete selection in input">
        <span class="close"></span>
    </button>
    <button type="button" class="combobox-btn" aria-label="Open country list" aria-disabled="true">
        <span class="vismaicon vismaicon-dynamic vismaicon-autocomplete"></span>
    </button>
    ...
</div>

Combobox with error - validation

For error (on validation) on the combobox you need to add .has-error class as in the code snippet below.

					

<div class="combobox-wrapper">
    <label for="comboboxInput" id="comboboxLabel" class="combobox-label" aria-label="Select one from the list">Single selection</label>
    <div role="combobox" id="combobox" class="combobox has-error" aria-expanded="false" aria-owns="comboboxList" aria-haspopup="listbox" aria-multiselectable="false">
        <div class="combobox-input">
            <span class="combobox-suggestion" option-selected="opt_5RQi6CK_208" style="text-indent: 0px;">swaziland</span>
            <input type="text" id="comboboxInput" placeholder="Enter selection" value="sw" spellcheck="false" aria-controls="comboboxList" aria-autocomplete="list" aria-activedescendant="">
        </div>
    </div>
    <span class="spinner spinner-xs spinner-default-blue"></span>
    <button type="button" class="clear-btn show" aria-label="Delete selection in input">
        <span class="close"></span>
    </button>
    <button type="button" class="combobox-btn" aria-label="Open country list">
        <span class="vismaicon vismaicon-dynamic vismaicon-autocomplete"></span>
    </button>
    ...
</div>

Combogrid

Combogrid allows the user to select one item out of a set of predefined options. Is similar to combobox, but contains more information in the form of more than one column and are presented as a grid instead of a list. Combogrids also allow text entry to search from a very long list of options or to add items that are not present in the list.

ID	Name	Address	City	Country

					

<div class="combobox-wrapper">
   ...
   <div class="combobox-dropdown show">
      <div class="combobox-table">
         <table role="table" id="" class="table">
            ...
         </table>
      </div>
   </div>
</div>