Recipe: Listbox / select component

A keyboard-navigable, accessible listbox built with native HTML and Tailwind. No dependencies.

Preview

Option Alpha
Option Beta
Option Gamma

Usage

<div class="relative w-64">
  <button class="flex w-full items-center
    justify-between rounded-lg border
    border-violet-500/40 bg-black px-4 py-3
    text-left text-sm text-white">
    <span>Select an option</span>
    <svg class="h-4 w-4 text-violet-500">...</svg>
  </button>
  <ul class="absolute z-10 mt-1 w-full
    rounded-lg border border-violet-500/30
    bg-black py-1 shadow-lg">
    <li class="cursor-pointer px-4 py-2
      text-sm hover:bg-violet-500/10">
      Option Alpha
    </li>
  </ul>
</div>

Notes

Uses native <button> and <ul> for screen-reader compatibility.
Add role="listbox" and aria-selected for full ARIA compliance.
Zero dependencies — works in any framework or vanilla HTML.