Select

The Select component is an accessible, customizable dropdown that lets users choose from multiple options. Ideal for forms or settings, Select streamlines user input by organizing choices in a clean, interactive way, keeping interfaces intuitive and clutter-free.

Preview Code

Favorite fruit Select a fruit

<div x-data="{fruits: [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'blueberry', label: 'Blueberry' },
    { value: 'grapes', label: 'Grapes' },
    { value: 'kiwi', label: 'Kiwi' },
    { value: 'mango', label: 'Mango' },
    { value: 'orange', label: 'Orange' },
    { value: 'pineapple', label: 'Pineapple' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'watermelon', label: 'Watermelon' }
]}">
    <div class="inline-flex flex-col gap-1 relative" x-data="select">
        <span x-ref="label">Favorite fruit</span>
        <button x-ref="trigger" class="rounded-md p-2 bg-transparent border border-zinc-200 w-[200px] flex items-center justify-between">
            <span x-ref="selectValue">Select a fruit</span>
            <svg aria-hidden="true" class="size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
        </button>
        <div x-ref="content" x-cloak class="flex flex-col gap-1 rounded-md p-1 scroll-py-1 bg-white border border-zinc-200 shadow-lg shadow-black/5 !w-full max-h-[16.5rem] overflow-auto">
            <template x-for="item in fruits" :key="item.value">
                <div x-data="selectItem(item)" class="inline-flex justify-between items-center gap-2 rounded py-1 px-2 cursor-default data-[highlighted]:bg-zinc-200 data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed">
                    <span x-ref="selectItemLabel"></span>
                    <svg aria-hidden="true" x-show="isSelected" class="size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                </div>
            </template>
        </div>
        <input type="hidden" x-model="value">
    </div>
</div>

Structure

<div x-data="select">
  <span x-ref="label"></span>
  <button x-ref="trigger">
      <span x-ref="selectValue"></span>
  </button>
  <div x-ref="content" x-cloak>
      <div x-data="selectItem({ value, label, disabled })">
          <span x-ref="selectItemLabel"></span>
      </div>
  </div>
  <input type="hidden" x-model="value">
</div>

API Reference

x-data="select"

The root component containing the state and functionality.

Property	Type	Description	Default
value	string	The currently selected value. This can also used to set a default value.	""
open	boolean	Whether the select list is open or not.	false
label	string	The label for the select component wich sets the aria-label. Alternatively you can add an element with x-ref="label wich will be used for aria-labelledby.	""
placement	enum "top" | "right" | "bottom" | "left"	Preferred placement of the select list relative to the trigger element	bottom
offset	number	Distance in pixels between select list and trigger	10
flip	boolean	Wether the select list should flip when not enough space is available	true
shift	object	Shifts select list position for view optimization	{ "padding": 10 }
arrow	boolean	Display an arrow pointing to the trigger. Needs an element with x-ref="arrow" inside the content element.`	true
onOpenChange	function	Callback when select open state changes	null
onValueChange	function	Callback when the selected value changes	null

x-data="selectItem"

A select item, which must be a child of the content element.

Property	Type	Description	Default
value	string	The value of the item.	""
label	string	The label of the item.	""
disabled	boolean	Whether the item is disabled or not.	false