Neobrutalism
Neobrutalism Checkboxes Grouped
Live Preview
<fieldset>
<legend class="sr-only">Checkboxes</legend>
<div
class="flex flex-col items-start divide-y-2 divide-black border-2 border-black shadow-[4px_4px_0_0]"
>
<label
for="Option1"
class="inline-flex items-start gap-3 p-4 focus-within:bg-yellow-300 hover:bg-yellow-100"
>
<input
type="checkbox"
class="size-6 border-2 border-black shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black"
id="Option1"
/>
<div>
<strong class="font-semibold"> Option 1 </strong>
<p class="mt-0.5 text-sm text-pretty">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
</p>
</div>
</label>
<label
for="Option2"
class="inline-flex items-start gap-3 p-4 focus-within:bg-yellow-300 hover:bg-yellow-100"
>
<input
type="checkbox"
class="size-6 border-2 border-black shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black"
id="Option2"
/>
<div>
<strong class="font-semibold"> Option 2 </strong>
<p class="mt-0.5 text-sm text-pretty">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
</p>
</div>
</label>
<label
for="Option3"
class="inline-flex items-start gap-3 p-4 focus-within:bg-yellow-300 hover:bg-yellow-100"
>
<input
type="checkbox"
class="size-6 border-2 border-black shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black"
id="Option3"
/>
<div>
<strong class="font-semibold"> Option 3 </strong>
<p class="mt-0.5 text-sm text-pretty">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
</p>
</div>
</label>
</div>
</fieldset>