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

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.

Combobox with header and footer sections in dropdown

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

Disabled state

For a propper disabled state for comobox it is recomanded to add a disabled attribute to the input as well.

Combobox with error - validation

Combogrid

Combogrids allow the user to select one item out of a set of predefined options. They are similar to comboboxes but contain 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

                
<!-- Combobox 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>


<!-- Combobox multiple 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="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 -->
<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>


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