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

Multiple selection

Combobox with header and footer sections in dropdown

Disabled state

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
002178	Mark Hernandez	3916 Parrill Court, Crown Point, IN 46307	Crwon Point	U.S.
010047	Mark Ivey Jr.	Quinta Fontainhas 63	Covilhã	Portugal
001435	Mark Johnson	2658 Eagle Street, Collinsville, IL 62234	Collinsville	U.S.
004367	Mark T. Nakamura	Skolspåret 81	Fårösund	Sweden
011009	Christensen Mark Sheffield	2232 Reppert Coal Road, Detroit, MI 48226	Detroit	U.S.
011009	Christensen Mark Sheffield	2232 Reppert Coal Road, Detroit, MI 48226	Detroit	U.S.
011009	Christensen Mark Sheffield	2232 Reppert Coal Road, Detroit, MI 48226	Detroit	U.S.
011009	Christensen Mark Sheffield	2232 Reppert Coal Road, Detroit, MI 48226	Detroit	U.S.
011009	Christensen Mark Sheffield	2232 Reppert Coal Road, Detroit, MI 48226	Detroit	U.S.
011009	Christensen Mark Sheffield	2232 Reppert Coal Road, Detroit, MI 48226	Detroit	U.S.
011009	Christensen Mark Sheffield	2232 Reppert Coal Road, Detroit, MI 48226	Detroit	U.S.
011009	Christensen Mark Sheffield	2232 Reppert Coal Road, Detroit, MI 48226	Detroit	U.S.
011009	Christensen Mark Sheffield	2232 Reppert Coal Road, Detroit, MI 48226	Detroit	U.S.
011009	Christensen Mark Sheffield	2232 Reppert Coal Road, Detroit, MI 48226	Detroit	U.S.
011009	Christensen Mark Sheffield	2232 Reppert Coal Road, Detroit, MI 48226	Detroit	U.S.
011009	Christensen Mark Sheffield	2232 Reppert Coal Road, Detroit, MI 48226	Detroit	U.S.
011009	Christensen Mark Sheffield	2232 Reppert Coal Road, Detroit, MI 48226	Detroit	U.S.
011009	Christensen Mark Sheffield	2232 Reppert Coal Road, Detroit, MI 48226	Detroit	U.S.
011009	Christensen Mark Sheffield	2232 Reppert Coal Road, Detroit, MI 48226	Detroit	U.S.
011009	Christensen Mark Sheffield	2232 Reppert Coal Road, Detroit, MI 48226	Detroit	U.S.
011009	Christensen Mark Sheffield	2232 Reppert Coal Road, Detroit, MI 48226	Detroit	U.S.
011009	Christensen Mark Sheffield	2232 Reppert Coal Road, Detroit, MI 48226	Detroit	U.S.

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