tailwind-ai/components/application_ui/forms/comboboxes/with_secondary_text.html

<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
<label for="combobox" class="block text-sm/6 font-medium text-gray-900"
  >Assigned to</label
>
<el-autocomplete class="relative mt-2 block">
  <input
    id="combobox"
    type="text"
    class="block w-full rounded-md bg-white py-1.5 pr-12 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
  />
  <button
    type="button"
    class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-hidden"
  >
    <svg
      viewBox="0 0 20 20"
      fill="currentColor"
      data-slot="icon"
      aria-hidden="true"
      class="size-5 text-gray-400"
    >
      <path
        d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
        clip-rule="evenodd"
        fill-rule="evenodd"
      />
    </svg>
  </button>

  <el-options
    anchor="bottom end"
    popover
    class="max-h-60 w-(--input-width) overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 [--anchor-gap:--spacing(1)] focus:outline-hidden sm:text-sm"
  >
    <el-option
      value="Leslie Alexander"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Leslie Alexander</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@lesliealexander</span
        >
      </div>
    </el-option>
    <el-option
      value="Michael Foster"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Michael Foster</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@michaelfoster</span
        >
      </div>
    </el-option>
    <el-option
      value="Dries Vincent"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Dries Vincent</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@driesvincent</span
        >
      </div>
    </el-option>
    <el-option
      value="Lindsay Walton"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Lindsay Walton</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@lindsaywalton</span
        >
      </div>
    </el-option>
    <el-option
      value="Courtney Henry"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Courtney Henry</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@courtneyhenry</span
        >
      </div>
    </el-option>
    <el-option
      value="Tom Cook"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Tom Cook</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@tomcook</span
        >
      </div>
    </el-option>
    <el-option
      value="Whitney Francis"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Whitney Francis</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@whitneyfrancis</span
        >
      </div>
    </el-option>
    <el-option
      value="Leonard Krasner"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Leonard Krasner</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@leonardkrasner</span
        >
      </div>
    </el-option>
    <el-option
      value="Floyd Miles"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Floyd Miles</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@floydmiles</span
        >
      </div>
    </el-option>
    <el-option
      value="Emily Selman"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Emily Selman</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@emilyselman</span
        >
      </div>
    </el-option>
    <el-option
      value="Kristin Watson"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Kristin Watson</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@kristinwatson</span
        >
      </div>
    </el-option>
    <el-option
      value="Emma Dorsey"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Emma Dorsey</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@emmadorsey</span
        >
      </div>
    </el-option>
    <el-option
      value="Alicia Bell"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Alicia Bell</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@aliciabell</span
        >
      </div>
    </el-option>
    <el-option
      value="Jenny Wilson"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Jenny Wilson</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@jennywilson</span
        >
      </div>
    </el-option>
    <el-option
      value="Anna Roberts"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Anna Roberts</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@annaroberts</span
        >
      </div>
    </el-option>
    <el-option
      value="Benjamin Russel"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Benjamin Russel</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@benjaminrussel</span
        >
      </div>
    </el-option>
    <el-option
      value="Jeffrey Webb"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Jeffrey Webb</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@jeffreywebb</span
        >
      </div>
    </el-option>
    <el-option
      value="Kathryn Murphy"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Kathryn Murphy</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@kathrynmurphy</span
        >
      </div>
    </el-option>
    <el-option
      value="Lawrence Hunter"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Lawrence Hunter</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@lawrencehunter</span
        >
      </div>
    </el-option>
    <el-option
      value="Yvette Armstrong"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Yvette Armstrong</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@yvettearmstrong</span
        >
      </div>
    </el-option>
    <el-option
      value="Angela Fisher"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Angela Fisher</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@angelafisher</span
        >
      </div>
    </el-option>
    <el-option
      value="Blake Reid"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Blake Reid</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@blakereid</span
        >
      </div>
    </el-option>
    <el-option
      value="Hector Gibbons"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Hector Gibbons</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@hectorgibbons</span
        >
      </div>
    </el-option>
    <el-option
      value="Fabricio Mendes"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Fabricio Mendes</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@fabriciomendes</span
        >
      </div>
    </el-option>
    <el-option
      value="Jillian Steward"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Jillian Steward</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@jilliansteward</span
        >
      </div>
    </el-option>
    <el-option
      value="Chelsea Hagon"
      class="block px-3 py-2 text-gray-900 select-none aria-selected:bg-indigo-600 aria-selected:text-white"
    >
      <div class="flex">
        <span class="truncate">Chelsea Hagon</span>
        <span class="ml-2 truncate text-gray-500 in-aria-selected:text-white"
          >@chelseahagon</span
        >
      </div>
    </el-option>
  </el-options>
</el-autocomplete>