Select

Example

HTML
<label>
  Cuisine
  <select aria-label="Select you favorite cuisine...">
    <option selected disabled value="">
      Select your favorite cuisine...
    </option>
    <option value="0">
      Italian
    </option>
    <option value="1">
      Japanese
    </option>
    <option value="2">
      Indian
    </option>
    <option value="3">
      Thai
    </option>
    <option value="4">
      French
    </option>
  </select>
</label>
<label>
  Snacks
  <select aria-label="Select you favorite snacks..." multiple>
    <option disabled value="">
      Select your favorite snacks...
    </option>
    <option value="cheese">
      Cheese
    </option>
    <option value="fruits">
      Fruits
    </option>
    <option value="nuts">
      Nuts
    </option>
    <option value="chocolate">
      Chocolate
    </option>
    <option value="crackers">
      Crackers
    </option>
  </select>
</label>

Single value

HTML
<label>
  Select a number
  <select aria-label="Select a number">
    <option value="one">
      One
    </option>
    <option value="two">
      Two
    </option>
    <option value="three">
      Three
    </option>
  </select>
</label>

Multiple values

HTML
<label>
  Select colors
  <select aria-label="Select colors" multiple>
    <option value="blue">
      Blue
    </option>
    <option value="green">
      Green
    </option>
    <option value="orange">
      Orange
    </option>
    <option value="purple">
      Purple
    </option>
    <option value="red">
      Red
    </option>
    <option value="yellow">
      Yellow
    </option>
  </select>
</label>

Disabled

HTML
<label>
  Cuisine
  <select aria-label="Select you favorite cuisine..." disabled>
    <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>
</label>
<label>
  Snacks
  <select name="favorite-snacks" aria-label="Select you favorite snacks..." multiple disabled>
    <option disabled value="">
      Select your favorite snacks...
    </option>
    <option>
      Cheese
    </option>
    <option>
      Fruits
    </option>
    <option>
      Nuts
    </option>
    <option>
      Chocolate
    </option>
    <option>
      Crackers
    </option>
  </select>
</label>

Hint

Select you favorite cuisine
HTML
<label>
  Cuisine
  <select aria-label="Select you favorite cuisine..." aria-describedby="favorite-cuisine-hint">
    <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>
</label>
<small id="favorite-cuisine-hint">
  Select you favorite cuisine
</small>

Validation

Great choice!
Please provide a valid value!
HTML
<div>
  <select name="pizza-topping" aria-label="Select your favorite pizza topping..." aria-invalid="false" aria-describedby="success-hint">
    <option disabled>
      Select your favorite pizza topping...
    </option>
    <option selected>
      Pepperoni
    </option>
    <option>
      Mushrooms
    </option>
    <option>
      Onions
    </option>
    <option>
      Green Peppers
    </option>
    <option>
      Olives
    </option>
  </select>
  <small id="success-hint">
    Great choice!
  </small>
</div>
<div>
  <select name="pizza-topping" aria-label="Select your favorite pizza topping..." aria-invalid="true" aria-describedby="failure-hint">
    <option disabled>
      Select your favorite pizza topping...
    </option>
    <option>
      Pepperoni
    </option>
    <option>
      Mushrooms
    </option>
    <option>
      Onions
    </option>
    <option>
      Green Peppers
    </option>
    <option>
      Olives
    </option>
  </select>
  <small id="failure-hint">
    Please provide a valid value!
  </small>
</div>