formsBeginner

Native Select

A custom-styled native <select> dropdown with a chevron.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a styled select dropdown with Tailwind: a label above and a <select> element with rounded borders, padding, and a custom chevron icon overlaid on the right (pointer-events-none so the native chevron is hidden via appearance: none). Focus ring on focus.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/selects/1.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-app-select
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="mx-auto max-w-xs p-6 w-full">
<label for="Headline">
      <span class="text-sm font-medium text-gray-700"> Headliner </span>

      <select
        name="Headline"
        id="Headline"
        class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm"
      >
        <option value="">Please select</option>
        <option value="JM">John Mayer</option>
        <option value="SRV">Stevie Ray Vaughn</option>
        <option value="JH">Jimi Hendrix</option>
        <option value="BBK">B.B King</option>
        <option value="AK">Albert King</option>
        <option value="BG">Buddy Guy</option>
        <option value="EC">Eric Clapton</option>
      </select>
    </label>
  </div>
</div>