Input Dropdown

Open in Figma View all renders

Dropdowns are wrapped with an input field - the same pattern for hint, help and error texts apply. 

<div class="input-field">
    <label for="input">label</label>
    <select class="dropdown-input" id="input" name="input" aria-invalid="false" aria-errormessage="input-validation" required>
        <option value="">placeholder</option>
        <option value="option-1">option</option>
        <option value="option-2">option</option>
        <option value="option-3">option</option>
    </select>
    <div id="input-validation" class="input-field__validation">validation message</div>
</div>

Dropdown with a preselected option

When rendering a component that has a preselected option, you can set it with the selected attribute. 

<div class="input-field">
    <label for="input-selected">label</label>
    <select class="dropdown-input" id="input-selected" name="input-selected" aria-invalid="false" aria-errormessage="input-selected-validation" required>
        <option value="">placeholder</option>
        <option value="option-1" selected>option</option>
        <option value="option-2">option</option>
        <option value="option-3">option</option>
    </select>
    <div id="input-selected-validation" class="input-field__validation">validation message</div>
</div>

Variations and modifiers

Input field with hint text

<div id="date-selector-month-year" class="flex gap-m">
    <select class="dropdown-input">
        <option value="">MM</option>
        <option value="January">January</option>
        <option value="February">February</option>
        <option value="March">March</option>
        <option value="April">April</option>
        <option value="May">May</option>
        <option value="June">June</option>
        <option value="July">July</option>
        <option value="August">August</option>
        <option value="September">September</option>
        <option value="October">October</option>
        <option value="November">November</option>
        <option value="December">December</option>
    </select>

    <select class="dropdown-input">
        <option value="">YYYY</option>
        <option value="2025">2025</option>
        <option value="2024">2024</option>
        <option value="2023">2023</option>
        <option value="2022">2022</option>
        <option value="2021">2021</option>
        <option value="2020">2020</option>
        <option value="2019">2019</option>
        <option value="2018">2018</option>
        <option value="2017">2017</option>
        <option value="2016">2016</option>
        <option value="2015">2015</option>
    </select>
</div>

Input field with help text

<div id="date-selector-year">
    <select class="dropdown-input">
        <option value="">YYYY</option>
        <option value="2025">2025</option>
        <option value="2024">2024</option>
        <option value="2023">2023</option>
        <option value="2022">2022</option>
        <option value="2021">2021</option>
        <option value="2020">2020</option>
        <option value="2019">2019</option>
        <option value="2018">2018</option>
        <option value="2017">2017</option>
        <option value="2016">2016</option>
        <option value="2015">2015</option>
    </select>
</div>