checkbox
a square box with the input's edge. checked fills it with the house ink; mixed means some, not all, and prints the ink at half.
bunx --bun shadcn@latest add @mk/checkboxexample
the box sits inside its label, so a click on the words checks it too. the box named “every ship” is the parent of the six under it: pick a few and it turns mixed, check it and it picks them all.
some, not all: the classic half
states
a checkbox is a control, not a field, so keyboard focus draws the 2 px house ring 2 px outside the box, as a button’s does.
empty
1 px input edge
checked
house ink, tick
mixed
ink at 50 percent
focus
2 px ring, 2 px out
invalid
1 px error edge
disabled
flat fill
disabled, checked
flat, tick dimmed
empty
1 px input edge
checked
house ink, tick
mixed
ink at 50 percent
focus
2 px ring, 2 px out
invalid
1 px error edge
disabled
flat fill
disabled, checked
flat, tick dimmed