I was just able to create a multiselect without any JS. However, its HTML and CSS got very of repetitive. Is there a way of improving it?
This barebones version of a multiselect also preserves the HTML item order, not the selection order. Is there a way of overriding it? Anyways, if anyone has any improvements suggestions, feel free to mention them.
You can also use the snippet below on the Tailwind Playground
/* Ignoring Tailwind Production Warning */
.as-console-wrapper { display: none!important; }
#multiselect:has(#options #option-a:checked) #selected-a {
display: block;
}
#multiselect:has(#options #option-b:checked) #selected-b {
display: block;
}<script src="https://cdn.tailwindcss.com"></script>
<div id="multiselect" class="p-2 flex flex-col gap-2">
<label>Multiselect</label>
<div id="selected" class="flex h-max min-h-12 flex-wrap gap-2 border-2 border-gray-200 p-1">
<p id="selected-a" class="hidden rounded-sm border-2 border-gray-100 p-1">Item A</p>
<p id="selected-b" class="hidden rounded-sm border-2 border-gray-100 p-1">Item B</p>
</div>
<div id="options" class="flex flex-col gap-1 p-2">
<div class="option">
<input id="option-a" type="checkbox" />
<label for="option-a">Item A</label>
</div>
<div class="option">
<input id="option-b" type="checkbox" />
<label for="option-b">Item B</label>
</div>
</div>
</div>