Select

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

Selects are width: 100% by default. Do not add af-w-full.

In browsers that support customizable <select>, the picker is styled and opens below the control (or above if there isn’t room). Elsewhere you get the classic OS picker — see Browser support below.

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

Choose an option Option 1 Option 2 Option 3 Choose a pet Cat Dog Hamster Chicken Cow Pig Error state Option 1 Disabled

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

Browser support

The control itself is a native <select> and works everywhere. Styling the drop-down list is progressive enhancement — there is no polyfill, and none is needed.

Feature	Chrome	Edge	Safari	Firefox
appearance: base-select Opting the control into the styleable picker	✓ 135 Supported from 135	✓ 135 Supported from 135	✓ 27 Supported from 27	⚑ Flag Behind a flag
::picker(select) Styling the drop-down list itself	✓ 135 Supported from 135	✓ 135 Supported from 135	✓ 27 Supported from 27	✕ No Not supported

Safari versions cover iOS Safari too. Without support: the browser's own picker, unstyled but fully functional. Versions checked against MDN browser-compat-data, August 2026. See Browser Support for Airframe's baseline.