Select

The select component (.select) is a fully custom dropdown listbox — used when the browser's native <select> doesn't offer enough visual control (option descriptions, icons, grouping) but you still want listbox keyboard/ARIA semantics. It has three parts: a trigger button, an absolutely-positioned listbox panel, and individual options.

<div class="select" style="min-width:220px">
  <button type="button" class="select-trigger" aria-haspopup="listbox" aria-expanded="false">
    <span class="select-value">Free</span><span class="select-icon" aria-hidden="true">▾</span>
  </button>
  <ul class="select-listbox" role="listbox" hidden>
    <li class="select-option action-select" id="opt-free" role="option" aria-selected="true">
      <span class="select-check" aria-hidden="true">✓</span><span class="select-opt-label">Free</span>
    </li>
    <li class="select-option action-select" id="opt-pro" role="option" aria-selected="false">
      <span class="select-check" aria-hidden="true"></span><span class="select-opt-label">Pro</span>
      <span class="select-opt-desc">Unlimited projects</span>
    </li>
  </ul>
</div>