Selects

<x-select color="neutral" placeholder="neutral"><option value="a">Apple</option><option value="b">Banana</option></x-select>
<x-select color="primary" placeholder="primary"><option value="a">Apple</option><option value="b">Banana</option></x-select>
<x-select color="info" placeholder="info"><option value="a">Apple</option><option value="b">Banana</option></x-select>
<x-select color="success" placeholder="success"><option value="a">Apple</option><option value="b">Banana</option></x-select>
<x-select color="warning" placeholder="warning"><option value="a">Apple</option><option value="b">Banana</option></x-select>
<x-select color="error" placeholder="error"><option value="a">Apple</option><option value="b">Banana</option></x-select>

<div class="w-full">
<div class="relative w-full" x-data="{ open: false, multi: false, placeholder: 'neutral', values: [], options: [], init() { const sel = this.$refs.native; this.options = Array.from(sel.options) .filter(o =&gt; !o.hidden) .map(o =&gt; ({ value: o.value, label: o.text, disabled: o.disabled })); // Defer reading selectedOptions until after Alpine finishes applying // this tree's other bindings (notably wire:model/x-model on the native // &lt;select&gt; itself). Without this, init() runs before the child select's // own binding corrects its value, so the cached `values` — and the // trigger label bound to it — get stuck on the pre-bind SSR state // (placeholder or first &lt;option&gt;) even though the native select and // the Livewire property end up correct. this.$nextTick(() =&gt; { this.values = Array.from(sel.selectedOptions).map(o =&gt; o.value).filter(v =&gt; v !== ''); }); }, toggle(value, isDisabled) { if (isDisabled) return; if (this.multi) { const i = this.values.indexOf(value); if (i &gt;= 0) this.values.splice(i, 1); else this.values.push(value); } else { this.values = [value]; this.open = false; } this.sync(); }, remove(value) { this.values = this.values.filter(v =&gt; v !== value); this.sync(); }, sync() { const sel = this.$refs.native; Array.from(sel.options).forEach(o =&gt; o.selected = this.values.includes(o.value)); sel.dispatchEvent(new Event('change', { bubbles: true })); }, isSelected(v) { return this.values.includes(v); }, optionFor(v) { return this.options.find(o =&gt; o.value === v); }, }" @keydown.escape.window="open = false" @click.outside="open = false">
<select x-ref="native" id="select_6a7e9b7274352" class="sr-only" tabindex="-1" aria-hidden="true">
<option value="" disabled selected hidden="">
                neutral
            </option>
<option value="a">
                Apple
            </option>
<option value="b">
                Banana
            </option>
</select>
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"></span></button>
<template x-if="!multi">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"><span :class="values.length ? 'truncate text-[length:var(--text-field-md)] text-base-content' : 'truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40'" x-text="values.length ? optionFor(values[0])?.label : placeholder"></span></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length === 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40" x-text="placeholder"></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length &gt; 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-for="v in values" :key="v">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-[length:var(--text-field-xs)] bg-base-200 text-base-content border-base-300"><span x-text="optionFor(v)?.label"></span>
<button type="button" class="shrink-0 inline-flex text-current/60 hover:text-current cursor-pointer" @click.stop="remove(v)" aria-label="Remove"><svg class="size-3" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></button></span></button>
</template>
</template><svg class="pointer-events-none shrink-0 size-4 text-base-content/40 transition-transform" :class="open ? 'rotate-180' : ''" viewbox="0 0 20 20" fill="currentcolor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 011.06 0L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd"></path></svg>
<ul x-show="open" x-cloak="" x-transition.opacity.duration.100ms="" class="absolute z-40 mt-1 w-full max-h-72 overflow-auto bg-base-100 tune-border border-base-300 rounded-[var(--radius-field)] shadow-[var(--shadow-box)] p-1" role="listbox" :aria-multiselectable="multi">
<template x-for="opt in options" :key="opt.value">
</template>
<li class="flex items-center justify-between gap-2 px-3 py-2 rounded-[var(--radius-field)] cursor-pointer text-base-content hover:bg-base-200 transition-colors text-[length:var(--text-field-md)]" :class="(isSelected(opt.value) ? 'bg-base-200 font-medium ' : '') + (opt.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : '')" role="option" :aria-selected="isSelected(opt.value)" @click="toggle(opt.value, opt.disabled)">
<span x-text="opt.label"></span>
<svg x-show="isSelected(opt.value)" class="shrink-0 size-4 text-base-content" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
</li>
</ul>
</div>
</div>
<div class="w-full">
<div class="relative w-full" x-data="{ open: false, multi: false, placeholder: 'primary', values: [], options: [], init() { const sel = this.$refs.native; this.options = Array.from(sel.options) .filter(o =&gt; !o.hidden) .map(o =&gt; ({ value: o.value, label: o.text, disabled: o.disabled })); // Defer reading selectedOptions until after Alpine finishes applying // this tree's other bindings (notably wire:model/x-model on the native // &lt;select&gt; itself). Without this, init() runs before the child select's // own binding corrects its value, so the cached `values` — and the // trigger label bound to it — get stuck on the pre-bind SSR state // (placeholder or first &lt;option&gt;) even though the native select and // the Livewire property end up correct. this.$nextTick(() =&gt; { this.values = Array.from(sel.selectedOptions).map(o =&gt; o.value).filter(v =&gt; v !== ''); }); }, toggle(value, isDisabled) { if (isDisabled) return; if (this.multi) { const i = this.values.indexOf(value); if (i &gt;= 0) this.values.splice(i, 1); else this.values.push(value); } else { this.values = [value]; this.open = false; } this.sync(); }, remove(value) { this.values = this.values.filter(v =&gt; v !== value); this.sync(); }, sync() { const sel = this.$refs.native; Array.from(sel.options).forEach(o =&gt; o.selected = this.values.includes(o.value)); sel.dispatchEvent(new Event('change', { bubbles: true })); }, isSelected(v) { return this.values.includes(v); }, optionFor(v) { return this.options.find(o =&gt; o.value === v); }, }" @keydown.escape.window="open = false" @click.outside="open = false">
<select x-ref="native" id="select_6a7e9b72743bb" class="sr-only" tabindex="-1" aria-hidden="true">
<option value="" disabled selected hidden="">
                primary
            </option>
<option value="a">
                Apple
            </option>
<option value="b">
                Banana
            </option>
</select>
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"></span></button>
<template x-if="!multi">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"><span :class="values.length ? 'truncate text-[length:var(--text-field-md)] text-base-content' : 'truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40'" x-text="values.length ? optionFor(values[0])?.label : placeholder"></span></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length === 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40" x-text="placeholder"></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length &gt; 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-for="v in values" :key="v">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-[length:var(--text-field-xs)] bg-primary/10 text-primary border-primary/30"><span x-text="optionFor(v)?.label"></span>
<button type="button" class="shrink-0 inline-flex text-current/60 hover:text-current cursor-pointer" @click.stop="remove(v)" aria-label="Remove"><svg class="size-3" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></button></span></button>
</template>
</template><svg class="pointer-events-none shrink-0 size-4 text-base-content/40 transition-transform" :class="open ? 'rotate-180' : ''" viewbox="0 0 20 20" fill="currentcolor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 011.06 0L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd"></path></svg>
<ul x-show="open" x-cloak="" x-transition.opacity.duration.100ms="" class="absolute z-40 mt-1 w-full max-h-72 overflow-auto bg-base-100 tune-border border-base-300 rounded-[var(--radius-field)] shadow-[var(--shadow-box)] p-1" role="listbox" :aria-multiselectable="multi">
<template x-for="opt in options" :key="opt.value">
</template>
<li class="flex items-center justify-between gap-2 px-3 py-2 rounded-[var(--radius-field)] cursor-pointer text-base-content hover:bg-base-200 transition-colors text-[length:var(--text-field-md)]" :class="(isSelected(opt.value) ? 'bg-primary/10 text-primary ' : '') + (opt.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : '')" role="option" :aria-selected="isSelected(opt.value)" @click="toggle(opt.value, opt.disabled)">
<span x-text="opt.label"></span>
<svg x-show="isSelected(opt.value)" class="shrink-0 size-4 text-primary" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
</li>
</ul>
</div>
</div>
<div class="w-full">
<div class="relative w-full" x-data="{ open: false, multi: false, placeholder: 'info', values: [], options: [], init() { const sel = this.$refs.native; this.options = Array.from(sel.options) .filter(o =&gt; !o.hidden) .map(o =&gt; ({ value: o.value, label: o.text, disabled: o.disabled })); // Defer reading selectedOptions until after Alpine finishes applying // this tree's other bindings (notably wire:model/x-model on the native // &lt;select&gt; itself). Without this, init() runs before the child select's // own binding corrects its value, so the cached `values` — and the // trigger label bound to it — get stuck on the pre-bind SSR state // (placeholder or first &lt;option&gt;) even though the native select and // the Livewire property end up correct. this.$nextTick(() =&gt; { this.values = Array.from(sel.selectedOptions).map(o =&gt; o.value).filter(v =&gt; v !== ''); }); }, toggle(value, isDisabled) { if (isDisabled) return; if (this.multi) { const i = this.values.indexOf(value); if (i &gt;= 0) this.values.splice(i, 1); else this.values.push(value); } else { this.values = [value]; this.open = false; } this.sync(); }, remove(value) { this.values = this.values.filter(v =&gt; v !== value); this.sync(); }, sync() { const sel = this.$refs.native; Array.from(sel.options).forEach(o =&gt; o.selected = this.values.includes(o.value)); sel.dispatchEvent(new Event('change', { bubbles: true })); }, isSelected(v) { return this.values.includes(v); }, optionFor(v) { return this.options.find(o =&gt; o.value === v); }, }" @keydown.escape.window="open = false" @click.outside="open = false">
<select x-ref="native" id="select_6a7e9b7274417" class="sr-only" tabindex="-1" aria-hidden="true">
<option value="" disabled selected hidden="">
                info
            </option>
<option value="a">
                Apple
            </option>
<option value="b">
                Banana
            </option>
</select>
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-info focus-within:ring-1 focus-within:ring-info h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"></span></button>
<template x-if="!multi">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-info focus-within:ring-1 focus-within:ring-info h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"><span :class="values.length ? 'truncate text-[length:var(--text-field-md)] text-base-content' : 'truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40'" x-text="values.length ? optionFor(values[0])?.label : placeholder"></span></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-info focus-within:ring-1 focus-within:ring-info h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length === 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-info focus-within:ring-1 focus-within:ring-info h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40" x-text="placeholder"></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-info focus-within:ring-1 focus-within:ring-info h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length &gt; 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-info focus-within:ring-1 focus-within:ring-info h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-for="v in values" :key="v">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-info focus-within:ring-1 focus-within:ring-info h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-[length:var(--text-field-xs)] bg-info/10 text-info border-info/30"><span x-text="optionFor(v)?.label"></span>
<button type="button" class="shrink-0 inline-flex text-current/60 hover:text-current cursor-pointer" @click.stop="remove(v)" aria-label="Remove"><svg class="size-3" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></button></span></button>
</template>
</template><svg class="pointer-events-none shrink-0 size-4 text-base-content/40 transition-transform" :class="open ? 'rotate-180' : ''" viewbox="0 0 20 20" fill="currentcolor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 011.06 0L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd"></path></svg>
<ul x-show="open" x-cloak="" x-transition.opacity.duration.100ms="" class="absolute z-40 mt-1 w-full max-h-72 overflow-auto bg-base-100 tune-border border-base-300 rounded-[var(--radius-field)] shadow-[var(--shadow-box)] p-1" role="listbox" :aria-multiselectable="multi">
<template x-for="opt in options" :key="opt.value">
</template>
<li class="flex items-center justify-between gap-2 px-3 py-2 rounded-[var(--radius-field)] cursor-pointer text-base-content hover:bg-base-200 transition-colors text-[length:var(--text-field-md)]" :class="(isSelected(opt.value) ? 'bg-info/10 text-info ' : '') + (opt.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : '')" role="option" :aria-selected="isSelected(opt.value)" @click="toggle(opt.value, opt.disabled)">
<span x-text="opt.label"></span>
<svg x-show="isSelected(opt.value)" class="shrink-0 size-4 text-info" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
</li>
</ul>
</div>
</div>
<div class="w-full">
<div class="relative w-full" x-data="{ open: false, multi: false, placeholder: 'success', values: [], options: [], init() { const sel = this.$refs.native; this.options = Array.from(sel.options) .filter(o =&gt; !o.hidden) .map(o =&gt; ({ value: o.value, label: o.text, disabled: o.disabled })); // Defer reading selectedOptions until after Alpine finishes applying // this tree's other bindings (notably wire:model/x-model on the native // &lt;select&gt; itself). Without this, init() runs before the child select's // own binding corrects its value, so the cached `values` — and the // trigger label bound to it — get stuck on the pre-bind SSR state // (placeholder or first &lt;option&gt;) even though the native select and // the Livewire property end up correct. this.$nextTick(() =&gt; { this.values = Array.from(sel.selectedOptions).map(o =&gt; o.value).filter(v =&gt; v !== ''); }); }, toggle(value, isDisabled) { if (isDisabled) return; if (this.multi) { const i = this.values.indexOf(value); if (i &gt;= 0) this.values.splice(i, 1); else this.values.push(value); } else { this.values = [value]; this.open = false; } this.sync(); }, remove(value) { this.values = this.values.filter(v =&gt; v !== value); this.sync(); }, sync() { const sel = this.$refs.native; Array.from(sel.options).forEach(o =&gt; o.selected = this.values.includes(o.value)); sel.dispatchEvent(new Event('change', { bubbles: true })); }, isSelected(v) { return this.values.includes(v); }, optionFor(v) { return this.options.find(o =&gt; o.value === v); }, }" @keydown.escape.window="open = false" @click.outside="open = false">
<select x-ref="native" id="select_6a7e9b7274471" class="sr-only" tabindex="-1" aria-hidden="true">
<option value="" disabled selected hidden="">
                success
            </option>
<option value="a">
                Apple
            </option>
<option value="b">
                Banana
            </option>
</select>
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-success focus-within:ring-1 focus-within:ring-success h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"></span></button>
<template x-if="!multi">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-success focus-within:ring-1 focus-within:ring-success h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"><span :class="values.length ? 'truncate text-[length:var(--text-field-md)] text-base-content' : 'truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40'" x-text="values.length ? optionFor(values[0])?.label : placeholder"></span></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-success focus-within:ring-1 focus-within:ring-success h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length === 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-success focus-within:ring-1 focus-within:ring-success h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40" x-text="placeholder"></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-success focus-within:ring-1 focus-within:ring-success h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length &gt; 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-success focus-within:ring-1 focus-within:ring-success h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-for="v in values" :key="v">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-success focus-within:ring-1 focus-within:ring-success h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-[length:var(--text-field-xs)] bg-success/10 text-success border-success/30"><span x-text="optionFor(v)?.label"></span>
<button type="button" class="shrink-0 inline-flex text-current/60 hover:text-current cursor-pointer" @click.stop="remove(v)" aria-label="Remove"><svg class="size-3" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></button></span></button>
</template>
</template><svg class="pointer-events-none shrink-0 size-4 text-base-content/40 transition-transform" :class="open ? 'rotate-180' : ''" viewbox="0 0 20 20" fill="currentcolor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 011.06 0L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd"></path></svg>
<ul x-show="open" x-cloak="" x-transition.opacity.duration.100ms="" class="absolute z-40 mt-1 w-full max-h-72 overflow-auto bg-base-100 tune-border border-base-300 rounded-[var(--radius-field)] shadow-[var(--shadow-box)] p-1" role="listbox" :aria-multiselectable="multi">
<template x-for="opt in options" :key="opt.value">
</template>
<li class="flex items-center justify-between gap-2 px-3 py-2 rounded-[var(--radius-field)] cursor-pointer text-base-content hover:bg-base-200 transition-colors text-[length:var(--text-field-md)]" :class="(isSelected(opt.value) ? 'bg-success/10 text-success ' : '') + (opt.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : '')" role="option" :aria-selected="isSelected(opt.value)" @click="toggle(opt.value, opt.disabled)">
<span x-text="opt.label"></span>
<svg x-show="isSelected(opt.value)" class="shrink-0 size-4 text-success" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
</li>
</ul>
</div>
</div>
<div class="w-full">
<div class="relative w-full" x-data="{ open: false, multi: false, placeholder: 'warning', values: [], options: [], init() { const sel = this.$refs.native; this.options = Array.from(sel.options) .filter(o =&gt; !o.hidden) .map(o =&gt; ({ value: o.value, label: o.text, disabled: o.disabled })); // Defer reading selectedOptions until after Alpine finishes applying // this tree's other bindings (notably wire:model/x-model on the native // &lt;select&gt; itself). Without this, init() runs before the child select's // own binding corrects its value, so the cached `values` — and the // trigger label bound to it — get stuck on the pre-bind SSR state // (placeholder or first &lt;option&gt;) even though the native select and // the Livewire property end up correct. this.$nextTick(() =&gt; { this.values = Array.from(sel.selectedOptions).map(o =&gt; o.value).filter(v =&gt; v !== ''); }); }, toggle(value, isDisabled) { if (isDisabled) return; if (this.multi) { const i = this.values.indexOf(value); if (i &gt;= 0) this.values.splice(i, 1); else this.values.push(value); } else { this.values = [value]; this.open = false; } this.sync(); }, remove(value) { this.values = this.values.filter(v =&gt; v !== value); this.sync(); }, sync() { const sel = this.$refs.native; Array.from(sel.options).forEach(o =&gt; o.selected = this.values.includes(o.value)); sel.dispatchEvent(new Event('change', { bubbles: true })); }, isSelected(v) { return this.values.includes(v); }, optionFor(v) { return this.options.find(o =&gt; o.value === v); }, }" @keydown.escape.window="open = false" @click.outside="open = false">
<select x-ref="native" id="select_6a7e9b72744cb" class="sr-only" tabindex="-1" aria-hidden="true">
<option value="" disabled selected hidden="">
                warning
            </option>
<option value="a">
                Apple
            </option>
<option value="b">
                Banana
            </option>
</select>
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-warning focus-within:ring-1 focus-within:ring-warning h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"></span></button>
<template x-if="!multi">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-warning focus-within:ring-1 focus-within:ring-warning h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"><span :class="values.length ? 'truncate text-[length:var(--text-field-md)] text-base-content' : 'truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40'" x-text="values.length ? optionFor(values[0])?.label : placeholder"></span></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-warning focus-within:ring-1 focus-within:ring-warning h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length === 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-warning focus-within:ring-1 focus-within:ring-warning h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40" x-text="placeholder"></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-warning focus-within:ring-1 focus-within:ring-warning h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length &gt; 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-warning focus-within:ring-1 focus-within:ring-warning h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-for="v in values" :key="v">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-warning focus-within:ring-1 focus-within:ring-warning h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-[length:var(--text-field-xs)] bg-warning/10 text-warning border-warning/30"><span x-text="optionFor(v)?.label"></span>
<button type="button" class="shrink-0 inline-flex text-current/60 hover:text-current cursor-pointer" @click.stop="remove(v)" aria-label="Remove"><svg class="size-3" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></button></span></button>
</template>
</template><svg class="pointer-events-none shrink-0 size-4 text-base-content/40 transition-transform" :class="open ? 'rotate-180' : ''" viewbox="0 0 20 20" fill="currentcolor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 011.06 0L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd"></path></svg>
<ul x-show="open" x-cloak="" x-transition.opacity.duration.100ms="" class="absolute z-40 mt-1 w-full max-h-72 overflow-auto bg-base-100 tune-border border-base-300 rounded-[var(--radius-field)] shadow-[var(--shadow-box)] p-1" role="listbox" :aria-multiselectable="multi">
<template x-for="opt in options" :key="opt.value">
</template>
<li class="flex items-center justify-between gap-2 px-3 py-2 rounded-[var(--radius-field)] cursor-pointer text-base-content hover:bg-base-200 transition-colors text-[length:var(--text-field-md)]" :class="(isSelected(opt.value) ? 'bg-warning/10 text-warning ' : '') + (opt.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : '')" role="option" :aria-selected="isSelected(opt.value)" @click="toggle(opt.value, opt.disabled)">
<span x-text="opt.label"></span>
<svg x-show="isSelected(opt.value)" class="shrink-0 size-4 text-warning" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
</li>
</ul>
</div>
</div>
<div class="w-full">
<div class="relative w-full" x-data="{ open: false, multi: false, placeholder: 'error', values: [], options: [], init() { const sel = this.$refs.native; this.options = Array.from(sel.options) .filter(o =&gt; !o.hidden) .map(o =&gt; ({ value: o.value, label: o.text, disabled: o.disabled })); // Defer reading selectedOptions until after Alpine finishes applying // this tree's other bindings (notably wire:model/x-model on the native // &lt;select&gt; itself). Without this, init() runs before the child select's // own binding corrects its value, so the cached `values` — and the // trigger label bound to it — get stuck on the pre-bind SSR state // (placeholder or first &lt;option&gt;) even though the native select and // the Livewire property end up correct. this.$nextTick(() =&gt; { this.values = Array.from(sel.selectedOptions).map(o =&gt; o.value).filter(v =&gt; v !== ''); }); }, toggle(value, isDisabled) { if (isDisabled) return; if (this.multi) { const i = this.values.indexOf(value); if (i &gt;= 0) this.values.splice(i, 1); else this.values.push(value); } else { this.values = [value]; this.open = false; } this.sync(); }, remove(value) { this.values = this.values.filter(v =&gt; v !== value); this.sync(); }, sync() { const sel = this.$refs.native; Array.from(sel.options).forEach(o =&gt; o.selected = this.values.includes(o.value)); sel.dispatchEvent(new Event('change', { bubbles: true })); }, isSelected(v) { return this.values.includes(v); }, optionFor(v) { return this.options.find(o =&gt; o.value === v); }, }" @keydown.escape.window="open = false" @click.outside="open = false">
<select x-ref="native" id="select_6a7e9b727452c" class="sr-only" tabindex="-1" aria-hidden="true">
<option value="" disabled selected hidden="">
                error
            </option>
<option value="a">
                Apple
            </option>
<option value="b">
                Banana
            </option>
</select>
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-error focus-within:ring-1 focus-within:ring-error h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"></span></button>
<template x-if="!multi">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-error focus-within:ring-1 focus-within:ring-error h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"><span :class="values.length ? 'truncate text-[length:var(--text-field-md)] text-base-content' : 'truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40'" x-text="values.length ? optionFor(values[0])?.label : placeholder"></span></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-error focus-within:ring-1 focus-within:ring-error h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length === 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-error focus-within:ring-1 focus-within:ring-error h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40" x-text="placeholder"></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-error focus-within:ring-1 focus-within:ring-error h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length &gt; 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-error focus-within:ring-1 focus-within:ring-error h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-for="v in values" :key="v">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-error focus-within:ring-1 focus-within:ring-error h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-[length:var(--text-field-xs)] bg-error/10 text-error border-error/30"><span x-text="optionFor(v)?.label"></span>
<button type="button" class="shrink-0 inline-flex text-current/60 hover:text-current cursor-pointer" @click.stop="remove(v)" aria-label="Remove"><svg class="size-3" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></button></span></button>
</template>
</template><svg class="pointer-events-none shrink-0 size-4 text-base-content/40 transition-transform" :class="open ? 'rotate-180' : ''" viewbox="0 0 20 20" fill="currentcolor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 011.06 0L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd"></path></svg>
<ul x-show="open" x-cloak="" x-transition.opacity.duration.100ms="" class="absolute z-40 mt-1 w-full max-h-72 overflow-auto bg-base-100 tune-border border-base-300 rounded-[var(--radius-field)] shadow-[var(--shadow-box)] p-1" role="listbox" :aria-multiselectable="multi">
<template x-for="opt in options" :key="opt.value">
</template>
<li class="flex items-center justify-between gap-2 px-3 py-2 rounded-[var(--radius-field)] cursor-pointer text-base-content hover:bg-base-200 transition-colors text-[length:var(--text-field-md)]" :class="(isSelected(opt.value) ? 'bg-error/10 text-error ' : '') + (opt.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : '')" role="option" :aria-selected="isSelected(opt.value)" @click="toggle(opt.value, opt.disabled)">
<span x-text="opt.label"></span>
<svg x-show="isSelected(opt.value)" class="shrink-0 size-4 text-error" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
</li>
</ul>
</div>
</div>

<x-select appearance="soft" color="neutral" placeholder="neutral"><option value="a">Apple</option></x-select>
<x-select appearance="soft" color="primary" placeholder="primary"><option value="a">Apple</option></x-select>
<x-select appearance="soft" color="info" placeholder="info"><option value="a">Apple</option></x-select>
<x-select appearance="soft" color="success" placeholder="success"><option value="a">Apple</option></x-select>
<x-select appearance="soft" color="warning" placeholder="warning"><option value="a">Apple</option></x-select>
<x-select appearance="soft" color="error" placeholder="error"><option value="a">Apple</option></x-select>

<div class="w-full">
<div class="relative w-full" x-data="{ open: false, multi: false, placeholder: 'neutral', values: [], options: [], init() { const sel = this.$refs.native; this.options = Array.from(sel.options) .filter(o =&gt; !o.hidden) .map(o =&gt; ({ value: o.value, label: o.text, disabled: o.disabled })); // Defer reading selectedOptions until after Alpine finishes applying // this tree's other bindings (notably wire:model/x-model on the native // &lt;select&gt; itself). Without this, init() runs before the child select's // own binding corrects its value, so the cached `values` — and the // trigger label bound to it — get stuck on the pre-bind SSR state // (placeholder or first &lt;option&gt;) even though the native select and // the Livewire property end up correct. this.$nextTick(() =&gt; { this.values = Array.from(sel.selectedOptions).map(o =&gt; o.value).filter(v =&gt; v !== ''); }); }, toggle(value, isDisabled) { if (isDisabled) return; if (this.multi) { const i = this.values.indexOf(value); if (i &gt;= 0) this.values.splice(i, 1); else this.values.push(value); } else { this.values = [value]; this.open = false; } this.sync(); }, remove(value) { this.values = this.values.filter(v =&gt; v !== value); this.sync(); }, sync() { const sel = this.$refs.native; Array.from(sel.options).forEach(o =&gt; o.selected = this.values.includes(o.value)); sel.dispatchEvent(new Event('change', { bubbles: true })); }, isSelected(v) { return this.values.includes(v); }, optionFor(v) { return this.options.find(o =&gt; o.value === v); }, }" @keydown.escape.window="open = false" @click.outside="open = false">
<select x-ref="native" id="select_6a7e9b72eb894" class="sr-only" tabindex="-1" aria-hidden="true">
<option value="" disabled selected hidden="">
                neutral
            </option>
<option value="a">
                Apple
            </option>
</select>
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-200 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"></span></button>
<template x-if="!multi">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-200 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"><span :class="values.length ? 'truncate text-[length:var(--text-field-md)] text-base-content' : 'truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40'" x-text="values.length ? optionFor(values[0])?.label : placeholder"></span></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-200 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length === 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-200 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40" x-text="placeholder"></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-200 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length &gt; 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-200 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-for="v in values" :key="v">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-200 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-[length:var(--text-field-xs)] bg-base-200 text-base-content border-base-300"><span x-text="optionFor(v)?.label"></span>
<button type="button" class="shrink-0 inline-flex text-current/60 hover:text-current cursor-pointer" @click.stop="remove(v)" aria-label="Remove"><svg class="size-3" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></button></span></button>
</template>
</template><svg class="pointer-events-none shrink-0 size-4 text-base-content/40 transition-transform" :class="open ? 'rotate-180' : ''" viewbox="0 0 20 20" fill="currentcolor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 011.06 0L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd"></path></svg>
<ul x-show="open" x-cloak="" x-transition.opacity.duration.100ms="" class="absolute z-40 mt-1 w-full max-h-72 overflow-auto bg-base-100 tune-border border-base-300 rounded-[var(--radius-field)] shadow-[var(--shadow-box)] p-1" role="listbox" :aria-multiselectable="multi">
<template x-for="opt in options" :key="opt.value">
</template>
<li class="flex items-center justify-between gap-2 px-3 py-2 rounded-[var(--radius-field)] cursor-pointer text-base-content hover:bg-base-200 transition-colors text-[length:var(--text-field-md)]" :class="(isSelected(opt.value) ? 'bg-base-200 font-medium ' : '') + (opt.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : '')" role="option" :aria-selected="isSelected(opt.value)" @click="toggle(opt.value, opt.disabled)">
<span x-text="opt.label"></span>
<svg x-show="isSelected(opt.value)" class="shrink-0 size-4 text-base-content" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
</li>
</ul>
</div>
</div>
<div class="w-full">
<div class="relative w-full" x-data="{ open: false, multi: false, placeholder: 'primary', values: [], options: [], init() { const sel = this.$refs.native; this.options = Array.from(sel.options) .filter(o =&gt; !o.hidden) .map(o =&gt; ({ value: o.value, label: o.text, disabled: o.disabled })); // Defer reading selectedOptions until after Alpine finishes applying // this tree's other bindings (notably wire:model/x-model on the native // &lt;select&gt; itself). Without this, init() runs before the child select's // own binding corrects its value, so the cached `values` — and the // trigger label bound to it — get stuck on the pre-bind SSR state // (placeholder or first &lt;option&gt;) even though the native select and // the Livewire property end up correct. this.$nextTick(() =&gt; { this.values = Array.from(sel.selectedOptions).map(o =&gt; o.value).filter(v =&gt; v !== ''); }); }, toggle(value, isDisabled) { if (isDisabled) return; if (this.multi) { const i = this.values.indexOf(value); if (i &gt;= 0) this.values.splice(i, 1); else this.values.push(value); } else { this.values = [value]; this.open = false; } this.sync(); }, remove(value) { this.values = this.values.filter(v =&gt; v !== value); this.sync(); }, sync() { const sel = this.$refs.native; Array.from(sel.options).forEach(o =&gt; o.selected = this.values.includes(o.value)); sel.dispatchEvent(new Event('change', { bubbles: true })); }, isSelected(v) { return this.values.includes(v); }, optionFor(v) { return this.options.find(o =&gt; o.value === v); }, }" @keydown.escape.window="open = false" @click.outside="open = false">
<select x-ref="native" id="select_6a7e9b72eb90c" class="sr-only" tabindex="-1" aria-hidden="true">
<option value="" disabled selected hidden="">
                primary
            </option>
<option value="a">
                Apple
            </option>
</select>
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-primary/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"></span></button>
<template x-if="!multi">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-primary/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"><span :class="values.length ? 'truncate text-[length:var(--text-field-md)] text-base-content' : 'truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40'" x-text="values.length ? optionFor(values[0])?.label : placeholder"></span></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-primary/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length === 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-primary/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40" x-text="placeholder"></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-primary/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length &gt; 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-primary/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-for="v in values" :key="v">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-primary/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-[length:var(--text-field-xs)] bg-primary/10 text-primary border-primary/30"><span x-text="optionFor(v)?.label"></span>
<button type="button" class="shrink-0 inline-flex text-current/60 hover:text-current cursor-pointer" @click.stop="remove(v)" aria-label="Remove"><svg class="size-3" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></button></span></button>
</template>
</template><svg class="pointer-events-none shrink-0 size-4 text-base-content/40 transition-transform" :class="open ? 'rotate-180' : ''" viewbox="0 0 20 20" fill="currentcolor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 011.06 0L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd"></path></svg>
<ul x-show="open" x-cloak="" x-transition.opacity.duration.100ms="" class="absolute z-40 mt-1 w-full max-h-72 overflow-auto bg-base-100 tune-border border-base-300 rounded-[var(--radius-field)] shadow-[var(--shadow-box)] p-1" role="listbox" :aria-multiselectable="multi">
<template x-for="opt in options" :key="opt.value">
</template>
<li class="flex items-center justify-between gap-2 px-3 py-2 rounded-[var(--radius-field)] cursor-pointer text-base-content hover:bg-base-200 transition-colors text-[length:var(--text-field-md)]" :class="(isSelected(opt.value) ? 'bg-primary/10 text-primary ' : '') + (opt.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : '')" role="option" :aria-selected="isSelected(opt.value)" @click="toggle(opt.value, opt.disabled)">
<span x-text="opt.label"></span>
<svg x-show="isSelected(opt.value)" class="shrink-0 size-4 text-primary" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
</li>
</ul>
</div>
</div>
<div class="w-full">
<div class="relative w-full" x-data="{ open: false, multi: false, placeholder: 'info', values: [], options: [], init() { const sel = this.$refs.native; this.options = Array.from(sel.options) .filter(o =&gt; !o.hidden) .map(o =&gt; ({ value: o.value, label: o.text, disabled: o.disabled })); // Defer reading selectedOptions until after Alpine finishes applying // this tree's other bindings (notably wire:model/x-model on the native // &lt;select&gt; itself). Without this, init() runs before the child select's // own binding corrects its value, so the cached `values` — and the // trigger label bound to it — get stuck on the pre-bind SSR state // (placeholder or first &lt;option&gt;) even though the native select and // the Livewire property end up correct. this.$nextTick(() =&gt; { this.values = Array.from(sel.selectedOptions).map(o =&gt; o.value).filter(v =&gt; v !== ''); }); }, toggle(value, isDisabled) { if (isDisabled) return; if (this.multi) { const i = this.values.indexOf(value); if (i &gt;= 0) this.values.splice(i, 1); else this.values.push(value); } else { this.values = [value]; this.open = false; } this.sync(); }, remove(value) { this.values = this.values.filter(v =&gt; v !== value); this.sync(); }, sync() { const sel = this.$refs.native; Array.from(sel.options).forEach(o =&gt; o.selected = this.values.includes(o.value)); sel.dispatchEvent(new Event('change', { bubbles: true })); }, isSelected(v) { return this.values.includes(v); }, optionFor(v) { return this.options.find(o =&gt; o.value === v); }, }" @keydown.escape.window="open = false" @click.outside="open = false">
<select x-ref="native" id="select_6a7e9b72eb974" class="sr-only" tabindex="-1" aria-hidden="true">
<option value="" disabled selected hidden="">
                info
            </option>
<option value="a">
                Apple
            </option>
</select>
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-info/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-info h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"></span></button>
<template x-if="!multi">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-info/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-info h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"><span :class="values.length ? 'truncate text-[length:var(--text-field-md)] text-base-content' : 'truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40'" x-text="values.length ? optionFor(values[0])?.label : placeholder"></span></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-info/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-info h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length === 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-info/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-info h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40" x-text="placeholder"></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-info/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-info h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length &gt; 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-info/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-info h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-for="v in values" :key="v">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-info/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-info h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-[length:var(--text-field-xs)] bg-info/10 text-info border-info/30"><span x-text="optionFor(v)?.label"></span>
<button type="button" class="shrink-0 inline-flex text-current/60 hover:text-current cursor-pointer" @click.stop="remove(v)" aria-label="Remove"><svg class="size-3" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></button></span></button>
</template>
</template><svg class="pointer-events-none shrink-0 size-4 text-base-content/40 transition-transform" :class="open ? 'rotate-180' : ''" viewbox="0 0 20 20" fill="currentcolor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 011.06 0L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd"></path></svg>
<ul x-show="open" x-cloak="" x-transition.opacity.duration.100ms="" class="absolute z-40 mt-1 w-full max-h-72 overflow-auto bg-base-100 tune-border border-base-300 rounded-[var(--radius-field)] shadow-[var(--shadow-box)] p-1" role="listbox" :aria-multiselectable="multi">
<template x-for="opt in options" :key="opt.value">
</template>
<li class="flex items-center justify-between gap-2 px-3 py-2 rounded-[var(--radius-field)] cursor-pointer text-base-content hover:bg-base-200 transition-colors text-[length:var(--text-field-md)]" :class="(isSelected(opt.value) ? 'bg-info/10 text-info ' : '') + (opt.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : '')" role="option" :aria-selected="isSelected(opt.value)" @click="toggle(opt.value, opt.disabled)">
<span x-text="opt.label"></span>
<svg x-show="isSelected(opt.value)" class="shrink-0 size-4 text-info" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
</li>
</ul>
</div>
</div>
<div class="w-full">
<div class="relative w-full" x-data="{ open: false, multi: false, placeholder: 'success', values: [], options: [], init() { const sel = this.$refs.native; this.options = Array.from(sel.options) .filter(o =&gt; !o.hidden) .map(o =&gt; ({ value: o.value, label: o.text, disabled: o.disabled })); // Defer reading selectedOptions until after Alpine finishes applying // this tree's other bindings (notably wire:model/x-model on the native // &lt;select&gt; itself). Without this, init() runs before the child select's // own binding corrects its value, so the cached `values` — and the // trigger label bound to it — get stuck on the pre-bind SSR state // (placeholder or first &lt;option&gt;) even though the native select and // the Livewire property end up correct. this.$nextTick(() =&gt; { this.values = Array.from(sel.selectedOptions).map(o =&gt; o.value).filter(v =&gt; v !== ''); }); }, toggle(value, isDisabled) { if (isDisabled) return; if (this.multi) { const i = this.values.indexOf(value); if (i &gt;= 0) this.values.splice(i, 1); else this.values.push(value); } else { this.values = [value]; this.open = false; } this.sync(); }, remove(value) { this.values = this.values.filter(v =&gt; v !== value); this.sync(); }, sync() { const sel = this.$refs.native; Array.from(sel.options).forEach(o =&gt; o.selected = this.values.includes(o.value)); sel.dispatchEvent(new Event('change', { bubbles: true })); }, isSelected(v) { return this.values.includes(v); }, optionFor(v) { return this.options.find(o =&gt; o.value === v); }, }" @keydown.escape.window="open = false" @click.outside="open = false">
<select x-ref="native" id="select_6a7e9b72eb9dd" class="sr-only" tabindex="-1" aria-hidden="true">
<option value="" disabled selected hidden="">
                success
            </option>
<option value="a">
                Apple
            </option>
</select>
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-success/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-success h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"></span></button>
<template x-if="!multi">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-success/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-success h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"><span :class="values.length ? 'truncate text-[length:var(--text-field-md)] text-base-content' : 'truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40'" x-text="values.length ? optionFor(values[0])?.label : placeholder"></span></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-success/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-success h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length === 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-success/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-success h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40" x-text="placeholder"></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-success/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-success h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length &gt; 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-success/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-success h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-for="v in values" :key="v">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-success/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-success h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-[length:var(--text-field-xs)] bg-success/10 text-success border-success/30"><span x-text="optionFor(v)?.label"></span>
<button type="button" class="shrink-0 inline-flex text-current/60 hover:text-current cursor-pointer" @click.stop="remove(v)" aria-label="Remove"><svg class="size-3" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></button></span></button>
</template>
</template><svg class="pointer-events-none shrink-0 size-4 text-base-content/40 transition-transform" :class="open ? 'rotate-180' : ''" viewbox="0 0 20 20" fill="currentcolor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 011.06 0L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd"></path></svg>
<ul x-show="open" x-cloak="" x-transition.opacity.duration.100ms="" class="absolute z-40 mt-1 w-full max-h-72 overflow-auto bg-base-100 tune-border border-base-300 rounded-[var(--radius-field)] shadow-[var(--shadow-box)] p-1" role="listbox" :aria-multiselectable="multi">
<template x-for="opt in options" :key="opt.value">
</template>
<li class="flex items-center justify-between gap-2 px-3 py-2 rounded-[var(--radius-field)] cursor-pointer text-base-content hover:bg-base-200 transition-colors text-[length:var(--text-field-md)]" :class="(isSelected(opt.value) ? 'bg-success/10 text-success ' : '') + (opt.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : '')" role="option" :aria-selected="isSelected(opt.value)" @click="toggle(opt.value, opt.disabled)">
<span x-text="opt.label"></span>
<svg x-show="isSelected(opt.value)" class="shrink-0 size-4 text-success" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
</li>
</ul>
</div>
</div>
<div class="w-full">
<div class="relative w-full" x-data="{ open: false, multi: false, placeholder: 'warning', values: [], options: [], init() { const sel = this.$refs.native; this.options = Array.from(sel.options) .filter(o =&gt; !o.hidden) .map(o =&gt; ({ value: o.value, label: o.text, disabled: o.disabled })); // Defer reading selectedOptions until after Alpine finishes applying // this tree's other bindings (notably wire:model/x-model on the native // &lt;select&gt; itself). Without this, init() runs before the child select's // own binding corrects its value, so the cached `values` — and the // trigger label bound to it — get stuck on the pre-bind SSR state // (placeholder or first &lt;option&gt;) even though the native select and // the Livewire property end up correct. this.$nextTick(() =&gt; { this.values = Array.from(sel.selectedOptions).map(o =&gt; o.value).filter(v =&gt; v !== ''); }); }, toggle(value, isDisabled) { if (isDisabled) return; if (this.multi) { const i = this.values.indexOf(value); if (i &gt;= 0) this.values.splice(i, 1); else this.values.push(value); } else { this.values = [value]; this.open = false; } this.sync(); }, remove(value) { this.values = this.values.filter(v =&gt; v !== value); this.sync(); }, sync() { const sel = this.$refs.native; Array.from(sel.options).forEach(o =&gt; o.selected = this.values.includes(o.value)); sel.dispatchEvent(new Event('change', { bubbles: true })); }, isSelected(v) { return this.values.includes(v); }, optionFor(v) { return this.options.find(o =&gt; o.value === v); }, }" @keydown.escape.window="open = false" @click.outside="open = false">
<select x-ref="native" id="select_6a7e9b72eba43" class="sr-only" tabindex="-1" aria-hidden="true">
<option value="" disabled selected hidden="">
                warning
            </option>
<option value="a">
                Apple
            </option>
</select>
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-warning/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-warning h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"></span></button>
<template x-if="!multi">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-warning/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-warning h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"><span :class="values.length ? 'truncate text-[length:var(--text-field-md)] text-base-content' : 'truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40'" x-text="values.length ? optionFor(values[0])?.label : placeholder"></span></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-warning/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-warning h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length === 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-warning/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-warning h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40" x-text="placeholder"></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-warning/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-warning h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length &gt; 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-warning/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-warning h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-for="v in values" :key="v">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-warning/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-warning h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-[length:var(--text-field-xs)] bg-warning/10 text-warning border-warning/30"><span x-text="optionFor(v)?.label"></span>
<button type="button" class="shrink-0 inline-flex text-current/60 hover:text-current cursor-pointer" @click.stop="remove(v)" aria-label="Remove"><svg class="size-3" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></button></span></button>
</template>
</template><svg class="pointer-events-none shrink-0 size-4 text-base-content/40 transition-transform" :class="open ? 'rotate-180' : ''" viewbox="0 0 20 20" fill="currentcolor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 011.06 0L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd"></path></svg>
<ul x-show="open" x-cloak="" x-transition.opacity.duration.100ms="" class="absolute z-40 mt-1 w-full max-h-72 overflow-auto bg-base-100 tune-border border-base-300 rounded-[var(--radius-field)] shadow-[var(--shadow-box)] p-1" role="listbox" :aria-multiselectable="multi">
<template x-for="opt in options" :key="opt.value">
</template>
<li class="flex items-center justify-between gap-2 px-3 py-2 rounded-[var(--radius-field)] cursor-pointer text-base-content hover:bg-base-200 transition-colors text-[length:var(--text-field-md)]" :class="(isSelected(opt.value) ? 'bg-warning/10 text-warning ' : '') + (opt.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : '')" role="option" :aria-selected="isSelected(opt.value)" @click="toggle(opt.value, opt.disabled)">
<span x-text="opt.label"></span>
<svg x-show="isSelected(opt.value)" class="shrink-0 size-4 text-warning" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
</li>
</ul>
</div>
</div>
<div class="w-full">
<div class="relative w-full" x-data="{ open: false, multi: false, placeholder: 'error', values: [], options: [], init() { const sel = this.$refs.native; this.options = Array.from(sel.options) .filter(o =&gt; !o.hidden) .map(o =&gt; ({ value: o.value, label: o.text, disabled: o.disabled })); // Defer reading selectedOptions until after Alpine finishes applying // this tree's other bindings (notably wire:model/x-model on the native // &lt;select&gt; itself). Without this, init() runs before the child select's // own binding corrects its value, so the cached `values` — and the // trigger label bound to it — get stuck on the pre-bind SSR state // (placeholder or first &lt;option&gt;) even though the native select and // the Livewire property end up correct. this.$nextTick(() =&gt; { this.values = Array.from(sel.selectedOptions).map(o =&gt; o.value).filter(v =&gt; v !== ''); }); }, toggle(value, isDisabled) { if (isDisabled) return; if (this.multi) { const i = this.values.indexOf(value); if (i &gt;= 0) this.values.splice(i, 1); else this.values.push(value); } else { this.values = [value]; this.open = false; } this.sync(); }, remove(value) { this.values = this.values.filter(v =&gt; v !== value); this.sync(); }, sync() { const sel = this.$refs.native; Array.from(sel.options).forEach(o =&gt; o.selected = this.values.includes(o.value)); sel.dispatchEvent(new Event('change', { bubbles: true })); }, isSelected(v) { return this.values.includes(v); }, optionFor(v) { return this.options.find(o =&gt; o.value === v); }, }" @keydown.escape.window="open = false" @click.outside="open = false">
<select x-ref="native" id="select_6a7e9b72ebaa7" class="sr-only" tabindex="-1" aria-hidden="true">
<option value="" disabled selected hidden="">
                error
            </option>
<option value="a">
                Apple
            </option>
</select>
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-error/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-error h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"></span></button>
<template x-if="!multi">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-error/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-error h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"><span :class="values.length ? 'truncate text-[length:var(--text-field-md)] text-base-content' : 'truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40'" x-text="values.length ? optionFor(values[0])?.label : placeholder"></span></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-error/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-error h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length === 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-error/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-error h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40" x-text="placeholder"></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-error/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-error h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi &amp;&amp; values.length &gt; 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-error/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-error h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-for="v in values" :key="v">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-error/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-error h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-[length:var(--text-field-xs)] bg-error/10 text-error border-error/30"><span x-text="optionFor(v)?.label"></span>
<button type="button" class="shrink-0 inline-flex text-current/60 hover:text-current cursor-pointer" @click.stop="remove(v)" aria-label="Remove"><svg class="size-3" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></button></span></button>
</template>
</template><svg class="pointer-events-none shrink-0 size-4 text-base-content/40 transition-transform" :class="open ? 'rotate-180' : ''" viewbox="0 0 20 20" fill="currentcolor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 011.06 0L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd"></path></svg>
<ul x-show="open" x-cloak="" x-transition.opacity.duration.100ms="" class="absolute z-40 mt-1 w-full max-h-72 overflow-auto bg-base-100 tune-border border-base-300 rounded-[var(--radius-field)] shadow-[var(--shadow-box)] p-1" role="listbox" :aria-multiselectable="multi">
<template x-for="opt in options" :key="opt.value">
</template>
<li class="flex items-center justify-between gap-2 px-3 py-2 rounded-[var(--radius-field)] cursor-pointer text-base-content hover:bg-base-200 transition-colors text-[length:var(--text-field-md)]" :class="(isSelected(opt.value) ? 'bg-error/10 text-error ' : '') + (opt.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : '')" role="option" :aria-selected="isSelected(opt.value)" @click="toggle(opt.value, opt.disabled)">
<span x-text="opt.label"></span>
<svg x-show="isSelected(opt.value)" class="shrink-0 size-4 text-error" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
</li>
</ul>
</div>
</div>