Tailwind CSS Checkbox Components

Checkbox

html

<input type="checkbox" checked="checked" class="checkbox">

Sizes

html

<input type="checkbox" checked="checked" class="checkbox checkbox-xs">
<input type="checkbox" checked="checked" class="checkbox checkbox-sm">
<input type="checkbox" checked="checked" class="checkbox checkbox-md">
<input type="checkbox" checked="checked" class="checkbox checkbox-lg">
<input type="checkbox" checked="checked" class="checkbox checkbox-xl">

Colors

html

<input type="checkbox" checked="checked" class="checkbox">
<input type="checkbox" checked="checked" class="checkbox checkbox-primary">
<input type="checkbox" checked="checked" class="checkbox checkbox-secondary">
<input type="checkbox" checked="checked" class="checkbox checkbox-accent">
<input type="checkbox" checked="checked" class="checkbox checkbox-info">
<input type="checkbox" checked="checked" class="checkbox checkbox-success">
<input type="checkbox" checked="checked" class="checkbox checkbox-warning">
<input type="checkbox" checked="checked" class="checkbox checkbox-error">
<input type="checkbox" checked="checked" class="checkbox checkbox-neutral">

Disabled

html

<input type="checkbox" class="checkbox" disabled="">
<input type="checkbox" class="checkbox" disabled="" checked="checked">

Square and rounded checkbox

html

<input type="checkbox" class="checkbox checkbox-square">
<input type="checkbox" class="checkbox checkbox-rounded">