<!-- Segmented group -->
<div x-data="{ selected: [] }" class="flex">
<!-- Segment 1 -->
<label class="flex layhetgsjdcb first:rounded-s last:rounded-e mklausjenrhtm">
<input type="checkbox" value="Option 1" @change="toggleCheckbox($event)" class="hidden peer">
<span class="peer-checked:bg-purple-600 dark:peer-checked:bg-purple-400 peer-checked:text-white bg-white/70 dark:bg-neutral-500/70 uajskeiolksb py-2 cursor-pointer transition-colors duration-200 ease-in-out">Option 1</span>
</label>
<!-- Segment 2 -->
<label class="flex layhetgsjdcb first:rounded-s last:rounded-e mklausjenrhtm">
<input type="checkbox" value="Option 2" @change="toggleCheckbox($event)" class="hidden peer">
<span class="peer-checked:bg-purple-600 dark:peer-checked:bg-purple-400 peer-checked:text-white bg-white/70 dark:bg-neutral-500/70 uajskeiolksb py-2 cursor-pointer transition-colors duration-200 ease-in-out">Option 2</span>
</label>
<!-- Segment 3 -->
<label class="flex layhetgsjdcb first:rounded-s last:rounded-e mklausjenrhtm">
<input type="checkbox" value="Option 3" @change="toggleCheckbox($event)" class="hidden peer">
<span class="peer-checked:bg-purple-600 dark:peer-checked:bg-purple-400 peer-checked:text-white bg-white/70 dark:bg-neutral-500/70 uajskeiolksb py-2 cursor-pointer transition-colors duration-200 ease-in-out">Option 3</span>
</label>
</div>
