Select

A select component is used to display a list of options.

Pick your favorite fruit

Zag.js Reference Show Code

---

---

<script is:inline>
  window.FRUITS = [
    "Apple",
    "Apricot",
    "Banana",
    "Blackberry",
    "Blueberry",
    "Cherry",
    "Cranberry",
    "Grape",
    "Kiwi",
    "Lemon",
    "Lime",
    "Mango",
    "Orange",
    "Papaya",
    "Peach",
    "Pear",
    "Pineapple",
    "Plum",
    "Raspberry",
    "Strawberry",
    "Watermelon"
  ]
</script>

<div
  x-cloak
  x-data
  x-select={`
    {
      items: { value: FRUITS },
      itemToValue: (it) => it,
      itemToString: (it) => it,
      positioning: { flip: true, sameWidth: true }
    }
  `}
>
  <div x-select:control>
    <label x-select:label>Pick your favorite fruit</label>
    <button x-select:trigger>
      <span x-text="$select.valueAsString || 'Select a fruit'"></span>
      <i class="i-lucide-chevrons-up-down w-4 h-4"></i>
    </button>
  </div>

  <template x-teleport="body">
    <div x-select:positioner>
      <div x-select:content>
        <ul>
          <template x-for="item in FRUITS" :key="item">
            <li>
              <button type="button" x-select:item="{ item }">
                <span x-select:item-indicator="{ item }">
                  <i class="i-lucide-check w-4 h-4"></i>
                </span>
                <span x-select:item-text="{ item }" x-text="item"></span>
              </button>
            </li>
          </template>
        </ul>
      </div>
    </div>
  </template>
</div>

<style>
  [data-part="root"] {
    @apply flex flex-col gap-1;
  }

  [data-part="label"] {
    @apply font-medium;
  }

  [data-part="trigger"] {
    @apply flex justify-between items-center px-2.5 h-9 min-w-48 bg-white text-zinc-700 border border-zinc-300/60 rounded outline-none focus:outline-zinc-500 cursor-pointer;
  }

  [data-part="trigger"][data-state="open"] {
    @apply outline-zinc-500;
  }

  [data-part="content"] {
    @apply relative z-[1400] max-h-48 bg-white border border-zinc-200/60 p-1 rounded-md shadow-md overflow-auto;
  }

  [data-part="content"] > ul {
    @apply flex flex-col p-0;
  }

  [data-part="content"] > ul > li {
    @apply list-none;
  }

  [data-part="item"] {
    @apply flex items-center w-full text-sm text-left font-medium text-zinc-700 bg-transparent cursor-pointer px-2 py-1 rounded;
  }

  [data-part="item"][data-highlighted] {
    @apply bg-zinc-100;
  }

  [data-part="item-text"] {
    @apply ml-5;
  }

  [data-part="item-indicator"][data-state="checked"] {
    @apply absolute inline-flex justify-center items-center;
  }

  @keyframes enter {
    from {
      opacity: 0;
      transform: scale(0.95) translateY(-10px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  @keyframes exit {
    from {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
    to {
      opacity: 0;
      transform: scale(0.95) translateY(-10px);
    }
  }

  [data-part="content"][data-state="open"] {
    animation: enter 0.2s ease-out;
  }

  [data-part="content"][data-state="closed"] {
    animation: exit 0.2s ease-out;
  }
</style>