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

<!--Enabled state-->

<div class="m-form-field">
    <label class="a-label a-label--heading" for="test_select_enabled">
        Enabled
    </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>

<br>

<!--Hover state-->
<div class="m-form-field">
    <label class="a-label a-label--heading" for="test_select__hover">
       Hover
    </label>
    <div class="a-select">
        <select id="test_select__hover" class="hover">
            <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>

<br>

<!--Focus state-->

<div class="m-form-field">
    <label class="a-label a-label--heading" for="test_select__focus">
        Focus
    </label>
    <div class="a-select">
        <select id="test_select__focus" class="focus">
            <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>

<br>

<!--Disabled state-->

<div class="m-form-field">
    <label class="a-label a-label--heading" for="test_select__disabled">Disabled</label>
    <div class="a-select a-select--disabled">
        <select id="test_select__disabled" disabled>
            <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">
        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 that will be wrapped 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