3.0.0-alpha.9 Alpha
Native Styles

Select

<select>

Selects allow you to choose items from a menu of predefined options.

Want to do more? Check out the <wa-select> component! 
<label>Select
  <select id="select">
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
  </select>
</label>

Examples

Appearance

Use the appearance utilities to change the select's visual appearance.

<label>Select
  <select id="select" class="wa-filled">
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
  </select>
</label>

Grouping options

In modern browsers, you can use the <hr> element as a divider:

<select>
  <small>Section 1</small>
  <option value="option-1">Option 1</option>
  <option value="option-2">Option 2</option>
  <option value="option-3">Option 3</option>
  <hr />
  <small>Section 2</small>
  <option value="option-4">Option 4</option>
  <option value="option-5">Option 5</option>
  <option value="option-6">Option 6</option>
</select>

To provide labels, you can use the <optgroup> element (with or without dividers):

<select>
  <optgroup label="Section 1">
  <option value="option-1">Option 1</option>
  <option value="option-2">Option 2</option>
  <option value="option-3">Option 3</option>
  </optgroup>
  <optgroup label="Section 2">
  <option value="option-4">Option 4</option>
  <option value="option-5">Option 5</option>
  <hr />
  <option value="option-6">Option 6</option>
  </optgroup>
</select>
    No results