<div x-data x-combobox class="max-w-lg space-y-4">
  <label class="label block required" x-combobox:label="" for="form_component_preview_test_model_favorite_fruits">Favorite fruits</label>
  <p x-combobox:desc class="help_text" >
    Please choose your favorite fruit
  </p>
  <select x-combobox:values="" name="form_component_preview_test_model[favorite_fruits]" id="form_component_preview_test_model_favorite_fruits"><option value="">- Select or Type -</option>
    <option value="apple">Apple</option>
    <option value="apricot">Apricot</option>
    <option value="avocado">Avocado</option>
    <option value="banana">Banana</option>
    <option value="blackberry">Blackberry</option>
    <option value="blood orange">Blood orange</option>
    <option value="blueberry">Blueberry</option>
    <option value="boysenberry">Boysenberry</option>
    <option value="breadfruit">Breadfruit</option>
    <option value="buddhas hand citron">Buddha's hand citron</option>
    <option value="cantaloupe">Cantaloupe</option>
    <option value="clementine">Clementine</option>
    <option value="crab apple">Crab apple</option>
    <option value="currant">Currant</option>
    <option value="cherry">Cherry</option>
    <option value="custard apple">Custard apple</option>
    <option value="coconut">Coconut</option>
    <option value="cranberry">Cranberry</option>
    <option value="date">Date</option>
    <option value="dragonfruit">Dragonfruit</option>
    <option value="durian">Durian</option>
    <option value="elderberry">Elderberry</option>
    <option value="fig">Fig</option>
    <option value="gooseberry">Gooseberry</option>
    <option value="grape">Grape</option>
    <option value="grapefruit">Grapefruit</option>
    <option value="guava">Guava</option>
    <option value="honeydew melon">Honeydew melon</option>
    <option value="jackfruit">Jackfruit</option>
    <option value="kiwifruit">Kiwifruit</option>
    <option value="kumquat">Kumquat</option>
    <option value="lemon">Lemon</option>
    <option value="lime">Lime</option>
    <option value="lychee">Lychee</option>
    <option value="mandarine">Mandarine</option>
    <option value="mango">Mango</option>
    <option value="mangosteen">Mangosteen</option>
    <option value="marionberry">Marionberry</option>
    <option value="nectarine">Nectarine</option>
    <option value="orange">Orange</option>
    <option value="papaya">Papaya</option>
    <option value="passionfruit">Passionfruit</option>
    <option value="peach">Peach</option>
    <option value="pear">Pear</option>
    <option value="persimmon">Persimmon</option>
    <option value="plantain">Plantain</option>
    <option value="plum">Plum</option>
    <option value="pineapple">Pineapple</option>
    <option value="pluot">Pluot</option>
    <option value="pomegranate">Pomegranate</option>
    <option value="pomelo">Pomelo</option>
    <option value="quince">Quince</option>
    <option value="raspberry">Raspberry</option>
    <option value="rambutan">Rambutan</option>
    <option value="soursop">Soursop</option>
    <option value="starfruit">Starfruit</option>
    <option value="strawberry">Strawberry</option>
    <option value="tamarind">Tamarind</option>
    <option value="tangelo">Tangelo</option>
    <option value="tangerine">Tangerine</option>
    <option value="ugli fruit">Ugli fruit</option>
    <option value="watermelon">Watermelon</option>
    <option value="yuzu">Yuzu</option>
    <option value="white currant">White currant</option></select>
  <template x-if="$combobox.isLoaded">
    <div class="relative mt-2">
      <div class="flex w-full">
        <input x-combobox:input class="pr-10 p-2 bg-white w-full h-10 rounded-sm border focus:outline focus:outline-offset-4 focus:outline-4 focus:!outline-blue-800 selection:!rounded-t-sm data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4" placeholder="- Select or Type -">
        <div class="absolute z-10 inset-y-0 right-0 flex">
          <button x-combobox:toggle class="h-full px-1 flex items-center focus:outline focus:-outline-offset-4 focus:outline-4 focus:outline-blue-40v/60 bg-transparent">
            <template x-if="$combobox.isOpen">
              <img alt="chevron up icon" class="size-[20px]" src="/assets/icons/arrow_open-285fae6c.svg" />
            </template>
            <template x-if="!$combobox.isOpen">
              <img alt="chevron down icon" class="size-[20px]" src="/assets/icons/arrow_closed-bb3c1d86.svg" />
            </template>
          </button>
        </div>
      </div>
      <ul x-combobox:list class="!list-none !absolute border !border-t-0 border-gray-60 bg-white max-h-52 overflow-y-scroll w-full z-10">
        <template x-for="option in $combobox.allOptions" :key="option.value">
          <li x-combobox:item class="p-2 !m-0 cursor-pointer aria-selected:bg-blue-60v data-active:outline data-active:outline-4 data-active:!outline-blue-800 data-active:-outline-offset-4" x-text="option.label"></li>
        </template>
        <template x-if="$combobox.noResults">
          <li class="p-2 cursor-not-allowed">
            No results found
          </li>
        </template>
      </ul>
    </div>
  </template>
</div>