Use select when there are several predefined options and only one can be chosen.

Usage

<div class="of-field">
  <label class="of-label" for="engagement-stage">Engagement stage</label>
  <select class="of-select" id="engagement-stage">
    <option>Discovery</option>
    <option>Planning</option>
    <option>Execution</option>
  </select>
</div>

Example

Accessibility

• Always pair with a visible label.
• Prefer native select for keyboard and screen-reader support.