Dropdowns and multiselects

Dropdowns allow the user to choose 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.


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

HTML code snippet

<div class="m-form-field m-form-field__select">
    <label class="a-label a-label__heading" for="test_select__multiple">
    <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">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>