Checkbox

A styled checkbox input. Built on <input type="checkbox"> with DaisyUI's checkbox class. Wrap in a <label> for accessible labelling. Supports sizes, colors, checked, and indeterminate states.

Default

Unchecked and checked states.

checkbox default

Unchecked Checked

Colors

All eight DaisyUI color tokens.

checkbox colors

primary secondary accent info success warning error neutral

Sizes

Five sizes: xs → xl.

checkbox sizes

xs sm md lg xl

Indeterminate

The indeterminate prop sets the mixed-state dash via JS. Useful for "select all" patterns.

checkbox indeterminate Some items selected

Disabled

Both unchecked and checked disabled states.

checkbox disabled

Disabled Disabled checked

Checklist

Real-world task list pattern.

checkbox checklist

Sprint tasks

Design system audit Implement Input component Write Checkbox demo Add unit tests Deploy to staging

Select all pattern

Parent uses indeterminate when only some children are checked.

checkbox select all

Select all (2 / 4) Document A Document B Document C Document D