Checkbox
Below you can find a checkbox component styled with tailwindcss.
Checkbox
- Preview
- HTML
- React
Copy
<div class="flex items-center">
<input class="hidden peer" type="checkbox" id="default-normal">
<label class="flex justify-center text-neutral-600 dark:text-neutral-200 cursor-pointer before:rounded before:border-neutral-600 dark:before:border-neutral-200 before:mr-1 hover:before:border-brand-primary-500 dark:hover:before:border-brand-primary-500 peer-checked:before:bg-brand-primary-500 peer-checked:before:border-brand-primary-500 peer-checked:before:ring-inset dark:peer-checked:before:ring-offset-theme-dark peer-checked:before:ring-brand-primary-500 transition-all duration-300 before:transition-all before:duration-300 before:w-3 before:h-3 before:rounded text-base before:border-2 peer-checked:before:ring-2 peer-checked:before:ring-offset-2 items-end" for="default-normal">
<span class="text-neutral-600 dark:text-neutral-200">
I
<span>accept</span>
the
<a class="text-brand-primary-500 hover:no-underline" rel="noopener noreferrer" target="_blank" href="https://www.iubenda.com/privacy-policy/463009">Privacy Policy</a>
</span>
</label>
</div>
Copy
<div className="flex items-center">
<input className="hidden peer" type="checkbox" id="default-normal" />
<label className="flex justify-center text-neutral-600 dark:text-neutral-200 cursor-pointer before:rounded before:border-neutral-600 dark:before:border-neutral-200 before:mr-1 hover:before:border-brand-primary-500 dark:hover:before:border-brand-primary-500 peer-checked:before:bg-brand-primary-500 peer-checked:before:border-brand-primary-500 peer-checked:before:ring-inset dark:peer-checked:before:ring-offset-theme-dark peer-checked:before:ring-brand-primary-500 transition-all duration-300 before:transition-all before:duration-300 before:w-3 before:h-3 before:rounded text-base before:border-2 peer-checked:before:ring-2 peer-checked:before:ring-offset-2 items-end" for="default-normal">
<span className="text-neutral-600 dark:text-neutral-200">
I
<span>accept</span>
the
<a className="text-brand-primary-500 hover:no-underline" rel="noopener noreferrer" target="_blank" href="https://www.iubenda.com/privacy-policy/463009">Privacy Policy</a>
</span>
</label>
</div>Checkbox Small
- Preview
- HTML
- React
Copy
<div class="flex items-center">
<input class="hidden peer" type="checkbox" id="default-small">
<label class="flex justify-center text-neutral-600 dark:text-neutral-200 cursor-pointer before:rounded before:border-neutral-600 dark:before:border-neutral-200 before:mr-1 hover:before:border-brand-primary-500 dark:hover:before:border-brand-primary-500 peer-checked:before:bg-brand-primary-500 peer-checked:before:border-brand-primary-500 peer-checked:before:ring-inset dark:peer-checked:before:ring-offset-theme-dark peer-checked:before:ring-brand-primary-500 transition-all duration-300 before:transition-all before:duration-300 before:w-2 before:h-2 before:rounded-[2.66px] text-xs before:border peer-checked:before:ring-[1.33px] peer-checked:before:ring-offset-[1.33px] items-center before:mt-[2px]" for="default-small">
<span class="text-neutral-600 dark:text-neutral-200">
I
<span>accept</span>
the
<a class="text-brand-primary-500 hover:no-underline" rel="noopener noreferrer" target="_blank" href="https://www.iubenda.com/privacy-policy/463009">Privacy Policy</a>
</span>
</label>
</div>
Copy
<div className="flex items-center">
<input className="hidden peer" type="checkbox" id="default-small" />
<label className="flex justify-center text-neutral-600 dark:text-neutral-200 cursor-pointer before:rounded before:border-neutral-600 dark:before:border-neutral-200 before:mr-1 hover:before:border-brand-primary-500 dark:hover:before:border-brand-primary-500 peer-checked:before:bg-brand-primary-500 peer-checked:before:border-brand-primary-500 peer-checked:before:ring-inset dark:peer-checked:before:ring-offset-theme-dark peer-checked:before:ring-brand-primary-500 transition-all duration-300 before:transition-all before:duration-300 before:w-2 before:h-2 before:rounded-[2.66px] text-xs before:border peer-checked:before:ring-[1.33px] peer-checked:before:ring-offset-[1.33px] items-center before:mt-[2px]" for="default-small">
<span className="text-neutral-600 dark:text-neutral-200">
I
<span>accept</span>
the
<a className="text-brand-primary-500 hover:no-underline" rel="noopener noreferrer" target="_blank" href="https://www.iubenda.com/privacy-policy/463009">Privacy Policy</a>
</span>
</label>
</div>Checkbox with error state
- Preview
- HTML
- React
Copy
<div class="flex items-center">
<input class="hidden peer" type="checkbox" id="error-normal">
<label class="flex justify-center text-neutral-600 dark:text-neutral-200 cursor-pointer before:rounded before:border-neutral-600 dark:before:border-neutral-200 before:mr-1 hover:before:border-brand-primary-500 dark:hover:before:border-brand-primary-500 peer-checked:before:bg-brand-primary-500 peer-checked:before:border-brand-primary-500 peer-checked:before:ring-inset dark:peer-checked:before:ring-offset-theme-dark peer-checked:before:ring-brand-primary-500 transition-all duration-300 before:transition-all before:duration-300 before:w-3 before:h-3 before:rounded text-base before:border-2 peer-checked:before:ring-2 peer-checked:before:ring-offset-2 items-end before:border-danger" for="error-normal">
<span class="text-neutral-600 dark:text-neutral-200">
I
<span class="text-danger">accept</span>
the
<a class="text-brand-primary-500 hover:no-underline text-neutral-600 dark:text-neutral-200" rel="noopener noreferrer" target="_blank" href="https://www.iubenda.com/privacy-policy/463009">Privacy Policy</a>
</span>
</label>
</div>
Copy
<div className="flex items-center">
<input className="hidden peer" type="checkbox" id="error-normal" />
<label className="flex justify-center text-neutral-600 dark:text-neutral-200 cursor-pointer before:rounded before:border-neutral-600 dark:before:border-neutral-200 before:mr-1 hover:before:border-brand-primary-500 dark:hover:before:border-brand-primary-500 peer-checked:before:bg-brand-primary-500 peer-checked:before:border-brand-primary-500 peer-checked:before:ring-inset dark:peer-checked:before:ring-offset-theme-dark peer-checked:before:ring-brand-primary-500 transition-all duration-300 before:transition-all before:duration-300 before:w-3 before:h-3 before:rounded text-base before:border-2 peer-checked:before:ring-2 peer-checked:before:ring-offset-2 items-end before:border-danger" for="error-normal">
<span className="text-neutral-600 dark:text-neutral-200">
I
<span className="text-danger">accept</span>
the
<a className="text-brand-primary-500 hover:no-underline text-neutral-600 dark:text-neutral-200" rel="noopener noreferrer" target="_blank" href="https://www.iubenda.com/privacy-policy/463009">Privacy Policy</a>
</span>
</label>
</div>Checkbox Small with error state
- Preview
- HTML
- React
Copy
<div class="flex items-center">
<input class="hidden peer" type="checkbox" id="default-small">
<label class="flex justify-center text-neutral-600 dark:text-neutral-200 cursor-pointer before:rounded before:border-neutral-600 dark:before:border-neutral-200 before:mr-1 hover:before:border-brand-primary-500 dark:hover:before:border-brand-primary-500 peer-checked:before:bg-brand-primary-500 peer-checked:before:border-brand-primary-500 peer-checked:before:ring-inset dark:peer-checked:before:ring-offset-theme-dark peer-checked:before:ring-brand-primary-500 transition-all duration-300 before:transition-all before:duration-300 before:w-2 before:h-2 before:rounded-[2.66px] text-xs before:border peer-checked:before:ring-[1.33px] peer-checked:before:ring-offset-[1.33px] items-center before:mt-[2px]" for="default-small">
<span class="text-neutral-600 dark:text-neutral-200">
I
<span>accept</span>
the
<a class="text-brand-primary-500 hover:no-underline" rel="noopener noreferrer" target="_blank" href="https://www.iubenda.com/privacy-policy/463009">Privacy Policy</a>
</span>
</label>
</div>
Copy
<div className="flex items-center">
<input className="hidden peer" type="checkbox" id="default-small" />
<label className="flex justify-center text-neutral-600 dark:text-neutral-200 cursor-pointer before:rounded before:border-neutral-600 dark:before:border-neutral-200 before:mr-1 hover:before:border-brand-primary-500 dark:hover:before:border-brand-primary-500 peer-checked:before:bg-brand-primary-500 peer-checked:before:border-brand-primary-500 peer-checked:before:ring-inset dark:peer-checked:before:ring-offset-theme-dark peer-checked:before:ring-brand-primary-500 transition-all duration-300 before:transition-all before:duration-300 before:w-2 before:h-2 before:rounded-[2.66px] text-xs before:border peer-checked:before:ring-[1.33px] peer-checked:before:ring-offset-[1.33px] items-center before:mt-[2px]" for="default-small">
<span className="text-neutral-600 dark:text-neutral-200">
I
<span>accept</span>
the
<a className="text-brand-primary-500 hover:no-underline" rel="noopener noreferrer" target="_blank" href="https://www.iubenda.com/privacy-policy/463009">Privacy Policy</a>
</span>
</label>
</div>