<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
<!-- primary / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-primary btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-primary btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-primary ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-primary btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-primary btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
<!-- primary-subtle / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-primary-subtle btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-subtle / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-primary-subtle btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-subtle / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-primary-subtle ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-subtle / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-primary-subtle btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-subtle / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-primary-subtle btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
<!-- primary-ghost / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-primary-ghost btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-ghost / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-primary-ghost btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-ghost / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-primary-ghost ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-ghost / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-primary-ghost btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-ghost / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-primary-ghost btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
<!-- primary-disabled / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-primary btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-disabled / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-primary btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-disabled / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-primary ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-disabled / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-primary btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-disabled / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-primary btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
<!-- primary-subtle-disabled / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-primary-subtle btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-subtle-disabled / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-primary-subtle btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-subtle-disabled / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-primary-subtle ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-subtle-disabled / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-primary-subtle btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-subtle-disabled / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-primary-subtle btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
<!-- primary-ghost-disabled / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-primary-ghost btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-ghost-disabled / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-primary-ghost btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-ghost-disabled / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-primary-ghost ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-ghost-disabled / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-primary-ghost btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- primary-ghost-disabled / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-primary-ghost btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
<!-- audio / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-audio btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-audio btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-audio ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-audio btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-audio btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
<!-- audio-subtle / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-audio-subtle btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-subtle / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-audio-subtle btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-subtle / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-audio-subtle ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-subtle / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-audio-subtle btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-subtle / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-audio-subtle btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
<!-- audio-ghost / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-audio-ghost btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-ghost / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-audio-ghost btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-ghost / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-audio-ghost ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-ghost / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-audio-ghost btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-ghost / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-audio-ghost btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
<!-- audio-disabled / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-audio btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-disabled / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-audio btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-disabled / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-audio ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-disabled / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-audio btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-disabled / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-audio btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
<!-- audio-subtle-disabled / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-audio-subtle btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-subtle-disabled / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-audio-subtle btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-subtle-disabled / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-audio-subtle ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-subtle-disabled / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-audio-subtle btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-subtle-disabled / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-audio-subtle btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
<!-- audio-ghost-disabled / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-audio-ghost btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-ghost-disabled / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-audio-ghost btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-ghost-disabled / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-audio-ghost ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-ghost-disabled / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-audio-ghost btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- audio-ghost-disabled / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-audio-ghost btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
<!-- dark / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-dark btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-dark btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-dark ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-dark btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-dark btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
<!-- dark-subtle / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-dark-subtle btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-subtle / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-dark-subtle btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-subtle / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-dark-subtle ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-subtle / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-dark-subtle btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-subtle / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-dark-subtle btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
<!-- dark-ghost / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-dark-ghost btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-ghost / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-dark-ghost btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-ghost / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-dark-ghost ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-ghost / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-dark-ghost btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-ghost / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-dark-ghost btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
<!-- dark-disabled / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-dark btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-disabled / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-dark btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-disabled / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-dark ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-disabled / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-dark btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-disabled / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-dark btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
<!-- dark-subtle-disabled / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-dark-subtle btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-subtle-disabled / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-dark-subtle btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-subtle-disabled / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-dark-subtle ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-subtle-disabled / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-dark-subtle btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-subtle-disabled / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-dark-subtle btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 ">
<!-- dark-ghost-disabled / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-dark-ghost btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-ghost-disabled / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-dark-ghost btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-ghost-disabled / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-dark-ghost ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-ghost-disabled / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-dark-ghost btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- dark-ghost-disabled / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-dark-ghost btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 relative before:absolute before:bg-dark-80 before:-top-5 before:-bottom-5 before:-left-5 before:-right-5">
<!-- light / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-light btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-light btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-light ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-light btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-light btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 relative before:absolute before:bg-dark-80 before:-top-5 before:-bottom-5 before:-left-5 before:-right-5">
<!-- light-subtle / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-light-subtle btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-subtle / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-light-subtle btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-subtle / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-light-subtle ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-subtle / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-light-subtle btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-subtle / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-light-subtle btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 relative before:absolute before:bg-dark-80 before:-top-5 before:-bottom-5 before:-left-5 before:-right-5">
<!-- light-ghost / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-light-ghost btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-ghost / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-light-ghost btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-ghost / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-light-ghost ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-ghost / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-light-ghost btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-ghost / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class="true btn btn-light-ghost btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 relative before:absolute before:bg-dark-80 before:-top-5 before:-bottom-5 before:-left-5 before:-right-5">
<!-- light-disabled / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-light btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-disabled / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-light btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-disabled / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-light ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-disabled / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-light btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-disabled / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-light btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 relative before:absolute before:bg-dark-80 before:-top-5 before:-bottom-5 before:-left-5 before:-right-5">
<!-- light-subtle-disabled / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-light-subtle btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-subtle-disabled / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-light-subtle btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-subtle-disabled / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-light-subtle ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-subtle-disabled / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-light-subtle btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-subtle-disabled / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-light-subtle btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 relative before:absolute before:bg-dark-80 before:-top-5 before:-bottom-5 before:-left-5 before:-right-5">
<!-- light-ghost-disabled / Extra Small -->
<div class="dropdown dropdown-size-xs" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-light-ghost btn-size-xs">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-ghost-disabled / Small -->
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-light-ghost btn-size-sm">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-ghost-disabled / Default -->
<div class="dropdown " x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-light-ghost ">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-ghost-disabled / Medium -->
<div class="dropdown dropdown-size-md" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-light-ghost btn-size-md">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
<!-- light-ghost-disabled / Large -->
<div class="dropdown dropdown-size-lg" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" disabled class="true btn btn-light-ghost btn-size-lg">
Label text
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Checkable item -->
<label class="dropdown-item ">
Very long item name to test the wrapping of the text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text check-able
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Checkable item -->
<label class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item check-able with icon
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C12.3472 3.75 14.25 5.65279 14.25 8C14.25 10.3472 12.3472 12.25 10 12.25C7.65279 12.25 5.75 10.3472 5.75 8C5.75 5.65279 7.65279 3.75 10 3.75ZM13.1254 12.8272C14.7051 11.8024 15.75 10.0232 15.75 8C15.75 4.82436 13.1756 2.25 10 2.25C6.82436 2.25 4.25 4.82436 4.25 8C4.25 10.0232 5.29494 11.8024 6.87458 12.8272C5.73658 13.2624 4.69098 13.9347 3.81282 14.8128C2.17187 16.4538 1.25 18.6794 1.25 21C1.25 21.4142 1.58579 21.75 2 21.75C2.41421 21.75 2.75 21.4142 2.75 21C2.75 19.0772 3.51384 17.2331 4.87348 15.8735C6.23311 14.5138 8.07718 13.75 10 13.75C11.9228 13.75 13.7669 14.5138 15.1265 15.8735C16.4862 17.2331 17.25 19.0772 17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21C18.75 18.6794 17.8281 16.4538 16.1872 14.8128C15.309 13.9347 14.2634 13.2624 13.1254 12.8272ZM16.9049 3.3174C17.1162 2.96114 17.5763 2.84362 17.9326 3.05493C18.7455 3.53708 19.4271 4.21219 19.9169 5.02051C20.4067 5.82883 20.6898 6.74543 20.7409 7.6892C20.7921 8.63297 20.6098 9.5748 20.2102 10.4313C19.9424 11.0055 19.5825 11.5294 19.1466 11.9834C21.0476 13.7453 22.75 16.7536 22.75 20C22.75 20.4142 22.4142 20.75 22 20.75C21.5858 20.75 21.25 20.4142 21.25 20C21.25 16.8994 19.3895 13.9796 17.55 12.6C17.3612 12.4584 17.25 12.2361 17.25 12.0001C17.25 11.764 17.3611 11.5417 17.5499 11.4001C18.1087 10.9808 18.5555 10.4303 18.8509 9.7972C19.1462 9.16411 19.2809 8.46797 19.2431 7.7704C19.2053 7.07283 18.9961 6.39535 18.6341 5.79789C18.272 5.20044 17.7683 4.70145 17.1674 4.34507C16.8111 4.13377 16.6936 3.67367 16.9049 3.3174Z" fill="currentColor" />
</svg>
Item with icon
</button>
</div>
</div>
</div>
{% for color in colors %}
<!-- Do not copy the div tag below -->
<div class="inline-flex items-start flex-col gap-2 {{ 'light' in color.color ? 'relative before:absolute before:bg-dark-80 before:-top-5 before:-bottom-5 before:-left-5 before:-right-5' }}">
{% for size in sizes %}
<!-- {{ color.name }} / {{ size.name }} -->
{% include "@template-dropdown" with {
size: size.size,
color: color.color,
type: type,
disabled: color.disabled,
label: label
} %}
{% endfor %}
</div>
{% endfor %}
{
"label": "Label text",
"colors": [
{
"name": "primary",
"color": "primary"
},
{
"name": "primary-subtle",
"color": "primary-subtle"
},
{
"name": "primary-ghost",
"color": "primary-ghost"
},
{
"name": "primary-disabled",
"color": "primary",
"disabled": true
},
{
"name": "primary-subtle-disabled",
"color": "primary-subtle",
"disabled": true
},
{
"name": "primary-ghost-disabled",
"color": "primary-ghost",
"disabled": true
},
{
"name": "audio",
"color": "audio"
},
{
"name": "audio-subtle",
"color": "audio-subtle"
},
{
"name": "audio-ghost",
"color": "audio-ghost"
},
{
"name": "audio-disabled",
"color": "audio",
"disabled": true
},
{
"name": "audio-subtle-disabled",
"color": "audio-subtle",
"disabled": true
},
{
"name": "audio-ghost-disabled",
"color": "audio-ghost",
"disabled": true
},
{
"name": "dark",
"color": "dark"
},
{
"name": "dark-subtle",
"color": "dark-subtle"
},
{
"name": "dark-ghost",
"color": "dark-ghost"
},
{
"name": "dark-disabled",
"color": "dark",
"disabled": true
},
{
"name": "dark-subtle-disabled",
"color": "dark-subtle",
"disabled": true
},
{
"name": "dark-ghost-disabled",
"color": "dark-ghost",
"disabled": true
},
{
"name": "light",
"color": "light"
},
{
"name": "light-subtle",
"color": "light-subtle"
},
{
"name": "light-ghost",
"color": "light-ghost"
},
{
"name": "light-disabled",
"color": "light",
"disabled": true
},
{
"name": "light-subtle-disabled",
"color": "light-subtle",
"disabled": true
},
{
"name": "light-ghost-disabled",
"color": "light-ghost",
"disabled": true
}
],
"sizes": [
{
"name": "Extra Small",
"size": "xs"
},
{
"name": "Small",
"size": "sm"
},
{
"name": "Default"
},
{
"name": "Medium",
"size": "md"
},
{
"name": "Large",
"size": "lg"
}
],
"type": "classic"
}
{% render "@template-dropdown" with {...} %}{% render "@template-dropdown" with {color: "dark",size:"sm",type: "leading-icon", label: "Trouver un magasin",items:[{label:'Trouver un opticien',type:'leading-icon'}]} %}xs, sm, default , md, lg | default: defaultprimary, audio , light, dark | default: primarytrue, false | default: falseleading-icon, classic | default: classicstring | default: Label textarray | default: []string | default: Label textcheckmark, button | default: buttonleading-icon, classic | default: classicstring | default: null | (tranform the item in a link)true, false | default: false object:string | default: libray--user-teamlibray, social or afflelou before the icon namestring | default: nullobject:string | default: libray--user-teamlibray, social or afflelou before the icon namestring | default: null