Back to neobrutalism components
Checkboxes
Neobrutalism-style checkbox components built with Tailwind CSS. Featuring thick borders, hard shadows, and custom check marks. Perfect for forms, filters, and settings requiring a bold, retro interactive element.
3/3 Dark Mode Updated: May 12, 2026
<fieldset>
<legend class="sr-only">Checkboxes</legend>
<div class="flex flex-col items-start gap-3">
<label for="Option1" class="inline-flex items-center gap-3 text-black">
<input
type="checkbox"
class="size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black"
id="Option1"
/>
<span class="font-semibold"> Option 1 </span>
</label>
<label for="Option2" class="inline-flex items-center gap-3 text-black">
<input
type="checkbox"
class="size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black"
id="Option2"
/>
<span class="font-semibold"> Option 2 </span>
</label>
<label for="Option3" class="inline-flex items-center gap-3 text-black">
<input
type="checkbox"
class="size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black"
id="Option3"
/>
<span class="font-semibold"> Option 3 </span>
</label>
</div>
</fieldset>Plugins: @tailwindcss/forms
<fieldset>
<legend class="sr-only">Checkboxes</legend>
<div class="flex flex-col items-start gap-3">
<label for="Option1" class="inline-flex items-center gap-3 text-black dark:text-white">
<input
type="checkbox"
class="size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-white"
id="Option1"
/>
<span class="font-semibold"> Option 1 </span>
</label>
<label for="Option2" class="inline-flex items-center gap-3 text-black dark:text-white">
<input
type="checkbox"
class="size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-white"
id="Option2"
/>
<span class="font-semibold"> Option 2 </span>
</label>
<label for="Option3" class="inline-flex items-center gap-3 text-black dark:text-white">
<input
type="checkbox"
class="size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-white"
id="Option3"
/>
<span class="font-semibold"> Option 3 </span>
</label>
</div>
</fieldset>Plugins: @tailwindcss/forms
<fieldset>
<legend class="sr-only">Checkboxes</legend>
<div class="flex flex-col items-start gap-3">
<label for="Option1" class="inline-flex items-start gap-3 text-black">
<input
type="checkbox"
class="size-6 border-2 border-black bg-white 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 text-black">
<input
type="checkbox"
class="size-6 border-2 border-black bg-white 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 text-black">
<input
type="checkbox"
class="size-6 border-2 border-black bg-white 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>Plugins: @tailwindcss/forms
<fieldset>
<legend class="sr-only">Checkboxes</legend>
<div class="flex flex-col items-start gap-3">
<label for="Option1" class="inline-flex items-start gap-3 text-black dark:text-white">
<input
type="checkbox"
class="size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-white"
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 text-black dark:text-white">
<input
type="checkbox"
class="size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-white"
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 text-black dark:text-white">
<input
type="checkbox"
class="size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-white"
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>Plugins: @tailwindcss/forms
<fieldset>
<legend class="sr-only">Checkboxes</legend>
<div
class="flex flex-col items-start divide-y-2 divide-black border-2 border-black bg-white shadow-[4px_4px_0_0] shadow-black"
>
<label
for="Option1"
class="inline-flex items-start gap-3 p-4 focus-within:bg-yellow-200 hover:bg-yellow-200"
>
<input
type="checkbox"
class="size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black"
id="Option1"
/>
<div class="text-black">
<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-200 hover:bg-yellow-200"
>
<input
type="checkbox"
class="size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black"
id="Option2"
/>
<div class="text-black">
<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-200 hover:bg-yellow-200"
>
<input
type="checkbox"
class="size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black"
id="Option3"
/>
<div class="text-black">
<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>Plugins: @tailwindcss/forms
<fieldset>
<legend class="sr-only">Checkboxes</legend>
<div
class="flex flex-col items-start divide-y-2 divide-black border-2 border-black bg-white shadow-[4px_4px_0_0] shadow-black dark:divide-white dark:border-white dark:bg-gray-900 dark:shadow-white"
>
<label
for="Option1"
class="inline-flex items-start gap-3 p-4 focus-within:bg-yellow-200 hover:bg-yellow-200 dark:focus-within:bg-yellow-700 dark:hover:bg-yellow-700"
>
<input
type="checkbox"
class="size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-white"
id="Option1"
/>
<div class="text-black dark:text-white">
<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-200 hover:bg-yellow-200 dark:focus-within:bg-yellow-700 dark:hover:bg-yellow-700"
>
<input
type="checkbox"
class="size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-white"
id="Option2"
/>
<div class="text-black dark:text-white">
<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-200 hover:bg-yellow-200 dark:focus-within:bg-yellow-700 dark:hover:bg-yellow-700"
>
<input
type="checkbox"
class="size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-white"
id="Option3"
/>
<div class="text-black dark:text-white">
<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>Plugins: @tailwindcss/forms