Checkbox
Classes Information
| ClassName | Description |
|---|---|
| checkbox | Container element |
| checkbox-primary | Primary color |
| checkbox-secondary | Secondary color |
| checkbox-success | Success color |
| checkbox-warning | Warning color |
| checkbox-bordered-primary | With primary border by default |
| checkbox-bordered-secondary | With secondary border by default |
| checkbox-bordered-success | With success border by default |
| checkbox-bordered-warning | With warning border by default |
| checkbox-bordered-error | With error border by default |
| checkbox-xs | Extra small size |
| checkbox-sm | Small size |
| checkbox-md | Medium size |
| checkbox-lg | Large size |
| checkbox-xl | Extra large size |
Basic Usage
Example Code
html
<div>
<label class="flex cursor-pointer gap-2">
<input type="checkbox" class="checkbox" />
<span>Remember me?</span>
</label>
</div>Disable
Example Code
html
<input type="checkbox" class="checkbox" disabled />
<input type="checkbox" class="checkbox" disabled checked />Colors
Example Code
html
<input type="checkbox" class="checkbox-primary checkbox" checked />
<input type="checkbox" class="checkbox-secondary checkbox" checked />
<input type="checkbox" class="checkbox-success checkbox" checked />
<input type="checkbox" class="checkbox-warning checkbox" checked />
<input type="checkbox" class="checkbox-error checkbox" checked />Bordered
Example Code
html
<input type="checkbox" class="checkbox checkbox-bordered-primary" />
<input type="checkbox" class="checkbox checkbox-bordered-secondary" />
<input type="checkbox" class="checkbox checkbox-bordered-success" />
<input type="checkbox" class="checkbox checkbox-bordered-warning" />
<input type="checkbox" class="checkbox checkbox-bordered-error" />Sizes
Example Code
html
<input type="checkbox" class="checkbox checkbox-xs" checked />
<input type="checkbox" class="checkbox checkbox-sm" checked />
<input type="checkbox" class="checkbox checkbox-md" checked />
<input type="checkbox" class="checkbox checkbox-lg" checked />
<input type="checkbox" class="checkbox checkbox-xl" checked />