← Back to Docs

Recipe: Combobox component design

A lightweight, accessible combobox built with native HTML and Tailwind CSS. No runtime dependencies.

Structure

<div role="combobox" aria-expanded="false">
  <input type="text" aria-autocomplete="list" />
  <ul role="listbox">
    <li role="option">Option A</li>
    <li role="option">Option B</li>
  </ul>
</div>

Styling

  • Input: border-[#8B5CF6]/30 focus:border-[#F472B6] focus:ring-1 focus:ring-[#F472B6]/50
  • Listbox: absolute, max-h-48, overflow-y-auto, z-50
  • Option hover: bg-[#8B5CF6]/10, selected: bg-[#8B5CF6]/20

Notes

Keep the listbox hidden via hidden attribute until the input receives focus or text. Use CSS-only filtering with peer and peer-[:not(:placeholder-shown)] for zero-JS filtering on static option sets.