Skip to content



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...

Select multiple#

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

Disabled select#

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

Validation states#

Validation states are provided with aria-invalid.

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

<select required aria-invalid="true">
  Please select your favorite pizza topping!


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

Edit this page on GitHub