Forms

Select

The native <select> is styled like the input for consistency.

<select name="favorite-cuisine" aria-label="Select your favorite cuisine..." required>  <option selected disabled value="">  Select your favorite cuisine...  </option>  <option>Italian</option>  <option>Japanese</option>  <option>Indian</option>  <option>Thai</option>  <option>French</option> </select>

Select multiple#

<select aria-label="Select your favorite snacks..." multiple size="6">  <option disabled>  Select your favorite snacks...  </option>  <option>Cheese</option>  <option selected>Fruits</option>  <option selected>Nuts</option>  <option>Chocolate</option>  <option>Crackers</option> </select>

Disabled select#

<select name="meal-type" aria-label="Select a meal type..." disabled>  <option>Select a meal type...</option>  <option>...</option> </select>

Validation states#

Validation states are provided with aria-invalid.

Great choice!Please select your favorite pizza topping!
<select aria-invalid="false">  ... </select> <small>Great choice!</small>  <select required aria-invalid="true">  ... </select> <small>  Please select your favorite pizza topping! </small>

Dropdown#

The dropdown component allows you to build a custom select with the same style as the native select. See Dropdown.

Select your favorite French dessert...

Edit this page on GitHub