Skip to content

Select

Dropdown select for choosing from a list of options. Select elements require either a .af-form wrapper or the .af-select class.

In browsers that support customizable <select> (appearance: base-select), the closed control keeps Airframe input styling and the open picker is styled to match menus and dropdowns — rounded surface, soft option hover, selected state, and a checkmark. Unsupported browsers keep the classic OS picker.

Markup

<!-- Use .af-select class -->
<select class="af-select">
  <option>
    Choose an option
  </option>
  <option>
    Option 1
  </option>
  <option>
    Option 2
  </option>
  <option>
    Option 3
  </option>
</select>
<!-- Or wrap in form.af-form for classless styling -->
<form class="af-form">
  <select>
    <option>
      Choose an option
    </option>
    <option>
      Option 1
    </option>
    <option>
      Option 2
    </option>
    <option>
      Option 3
    </option>
  </select>
</form>

States

<select class="af-select">
  <option>
    Normal
  </option>
</select>
<select class="af-select" aria-invalid="true">
  <option>
    Error state
  </option>
</select>
<select class="af-select" disabled>
  <option>
    Disabled
  </option>
</select>

Option groups

<select class="af-select">
  <option value="">
    Choose a pet
  </option>
  <optgroup label="Domestic">
    <option>
      Cat
    </option>
    <option>
      Dog
    </option>
    <option>
      Hamster
    </option>
  </optgroup>
  <optgroup label="Farm">
    <option>
      Chicken
    </option>
    <option>
      Cow
    </option>
    <option>
      Pig
    </option>
  </optgroup>
</select>

Live example