Search with Filter Chips

<div class="mx-auto w-full max-w-lg">
  <label class="sr-only" for="filter-search">Search</label>
  <input id="filter-search" type="search" placeholder="Search…" autocomplete="off" class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400" />

  <!-- Filter chips are toggle buttons - aria-pressed carries the on/off state. -->
  <div class="mt-3 flex flex-wrap gap-2" role="group" aria-label="Filter by category">
    <button type="button" aria-pressed="true" class="rounded-full border border-blue-600 bg-blue-600 px-3 py-1 text-xs font-medium text-white">All</button>
    <button type="button" aria-pressed="false" class="rounded-full border border-gray-300 px-3 py-1 text-xs font-medium text-gray-700 hover:border-gray-400 dark:border-gray-700 dark:text-gray-200">Design</button>
    <button type="button" aria-pressed="false" class="rounded-full border border-gray-300 px-3 py-1 text-xs font-medium text-gray-700 hover:border-gray-400 dark:border-gray-700 dark:text-gray-200">Engineering</button>
  </div>

  <p class="mt-3 text-xs text-gray-600 dark:text-gray-300" role="status" aria-live="polite">3 results</p>

  <ul class="mt-1 divide-y divide-gray-200 dark:divide-gray-800">
    <li class="flex items-center justify-between gap-3 py-2.5"><span class="text-sm text-gray-900 dark:text-gray-100">Design tokens guide</span><span class="rounded-full bg-gray-100 px-2 py-0.5 text-[0.6875rem] text-gray-600 dark:bg-gray-800 dark:text-gray-300">Design</span></li>
  </ul>
</div>