<label class="block">
    <span>What type of event is it?</span>
    <select
      class="form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
    >
      <option>Corporate event</option>
      <option>Wedding</option>
      <option>Birthday</option>
      <option>Other</option>
    </select>
  </label>

              

                
  <label class="block">
    <span>What type of event is it?</span>
    <select
      class="form-select mt-1.5 w-full rounded-full border border-slate-300 bg-white px-4 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
    >
      <option>Corporate event</option>
      <option>Wedding</option>
      <option>Birthday</option>
      <option>Other</option>
    </select>
  </label>

              

                
  <label class="block">
    <span>What type of event is it?</span>
    <select
      class="form-select mt-1.5 w-full rounded-lg bg-slate-150 px-3 py-2 ring-primary/50 hover:bg-slate-200 focus:ring-3 dark:bg-navy-900/90 dark:ring-accent/50 dark:hover:bg-navy-900 dark:focus:bg-navy-900"
    >
      <option>Corporate event</option>
      <option>Wedding</option>
      <option>Birthday</option>
      <option>Other</option>
    </select>
  </label>

              

                
  <label class="block">
    <span>What type of event is it?</span>
    <select
      class="form-select mt-1 h-8 w-full rounded-lg border border-slate-300 bg-white px-2.5 text-xs-plus hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
    >
      <option>Corporate event</option>
      <option>Wedding</option>
      <option>Birthday</option>
      <option>Other</option>
    </select>
  </label>
  <label class="block">
    <span>What type of event is it?</span>
    <select
      class="form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
    >
      <option>Corporate event</option>
      <option>Wedding</option>
      <option>Birthday</option>
      <option>Other</option>
    </select>
  </label>
  <label class="block">
    <span>What type of event is it?</span>
    <select
      class="form-select mt-1 h-12 w-full rounded-lg border border-slate-300 bg-white px-2.5 text-base hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
    >
      <option>Corporate event</option>
      <option>Wedding</option>
      <option>Birthday</option>
      <option>Other</option>
    </select>
  </label>  

              

                
  <label class="block">
    <span>What type of event is it?</span>
    <select
      disabled
      class="form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary disabled:pointer-events-none disabled:select-none disabled:border-none disabled:bg-zinc-100 dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent dark:disabled:bg-navy-600"
    >
      <option>Corporate event</option>
      <option>Wedding</option>
      <option>Birthday</option>
      <option>Other</option>
    </select>
  </label>

              

                
  <label class="block">
    <span>What type of event is it?</span>
    <select
      multiple
      class="form-multiselect mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
    >
      <option>Corporate event</option>
      <option selected>Wedding</option>
      <option>Birthday</option>
      <option>Other</option>
    </select>
  </label>

              

                
  <div x-data="{selectedItem:'item_1'}">
    <label class="block">
      <span>What type of event is it?</span>
      <select
        x-model="selectedItem"
        class="form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
      >
        <option value="item_1">Corporate event</option>
        <option value="item_2">Wedding</option>
        <option value="item_3">Birthday</option>
        <option value="item_4">Other</option>
      </select>
    </label>
    <p class="mt-2">Value: <span x-text="selectedItem"></span></p>
  </div>

                
              

                
  <label class="block">
    <span>What type of event is it?</span>
    <select
      multiple
      x-model="selectedItem"
      class="form-multiselect mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
    >
      <option value="item_1">Corporate event</option>
      <option value="item_2">Wedding</option>
      <option value="item_3">Birthday</option>
      <option value="item_4">Other</option>
    </select>
  </label>
  <p class="mt-1">Value: <span x-text="selectedItem"></span></p>