Checkbox

Checkboxes are used to select or deselect a value.

Class name
Type
form-controlComponent Container element
checkboxComponent For checkbox
checkbox-primary
Modifier
Adds `primary` to checkbox
checkbox-secondary
Modifier
Adds `secondary` to checkbox
checkbox-accent
Modifier
Adds `accent` to checkbox
checkbox-success
Modifier
Adds `success` to checkbox
checkbox-warning
Modifier
Adds `warning` to checkbox
checkbox-info
Modifier
Adds `info` to checkbox
checkbox-error
Modifier
Adds `error` to checkbox
checkbox-lg
Responsive
Large checkbox
checkbox-md
Responsive
Medium checkbox (default)
checkbox-sm
Responsive
Small checkbox
checkbox-xs
Responsive
Extra small checkbox
# Checkbox
# With label and form-control
# Primary color
# Secondary color
# Accent color
# Success color
# Warning color
# Info color
# Error color
# Sizes
# Disabled
# Disabled and checked
# Indeterminate
# Checkbox with custom colors
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details