Skip to content
HyperUI

No results found.

Back to application components

Selects

Customizable select components and responsive dropdown menus for filtering data, user preferences, and form controls in web applications.

HyperUX Pattern AvailableUpdated: Jul 4, 2026

Base

markmead

<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>

Plugins: @tailwindcss/forms

Option groups

markmead

<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-lg border-gray-300 sm:text-sm"
  >
    <option value="">Please select</option>

    <optgroup label="A">
      <option value="AK">Albert King</option>
    </optgroup>

    <optgroup label="B">
      <option value="BBK">B.B King</option>
      <option value="BG">Buddy Guy</option>
    </optgroup>

    <optgroup label="E">
      <option value="EC">Eric Clapton</option>
    </optgroup>

    <optgroup label="J">
      <option value="JM">John Mayer</option>
      <option value="JH">Jimi Hendrix</option>
    </optgroup>

    <optgroup label="S">
      <option value="SRV">Stevie Ray Vaughn</option>
    </optgroup>
  </select>
</label>

Plugins: @tailwindcss/forms

Datalist

markmead

<label for="Headline">
  <span class="text-sm font-medium text-gray-700"> Headliner </span>

  <div class="relative">
    <input
      type="text"
      id="Headline"
      list="HeadlineList"
      placeholder="Please select"
      class="mt-0.5 w-full rounded border-gray-300 pe-8 shadow-sm sm:text-sm [&::-webkit-calendar-picker-indicator]:opacity-0"
    />

    <span class="absolute inset-y-0 end-0 grid w-8 place-content-center text-gray-700">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="size-4"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
      </svg>
    </span>
  </div>

  <datalist name="Headline" id="HeadlineList">
    <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>
  </datalist>
</label>

Plugins: @tailwindcss/forms

Related components

View all application components