Components

Selects

Selects allow users to make a single selection or multiple selections from a finite list of options. They are not always the best choice from a usability perspective; see the use cases section below for more details.

Types

Single select

Allows the user to select a single item from a dropdown list of options.

HTML code snippet

<div class="m-form-field">
    <label class="a-label a-label--heading" for="test_select_enabled">
        Example label
    </label>
    <div class="a-select">
        <select id="test_select_enabled">
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
            <option value="option4">Option 4</option>
        </select>
    </div>
</div>

Multiselect

Allows the user to select multiple items from a dropdown list of options.

HTML code snippet

<div class="m-form-field">
    <label class="a-label a-label--heading" for="test_select__multiple">
        Example label
    </label>
    <select class="o-multiselect" id="test_select__multiple" multiple>
        <option value="option1" selected>Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4" selected>Option 4</option>
        <option value="option5">Option 5</option>
        <option value="option6">Option 6</option>
        <option value="option7">Option 7</option>
        <option value="option8">Multiselect options can also contain long words like supercalifragilisticexpialidocious</option>
    </select>
</div>

Implementation details

Custom JavaScript may be required to make the default multiselect component accessible for the visually impaired. See the accessibility section for more information.

Latest Updates

Page last edited:
Show all details
Edit page