Component skill

Checkboxes

Built directly from .claude/skills/eco-checkbox/SKILL.md. Real checkboxes are interactive (try clicking, tabbing to them); a few states that only exist momentarily on hover are simulated with a class so every state is visible at once for reference.

Light mode

Default (unchecked)
Hover (unchecked)
Checked
Hover (checked)
Indeterminate
Disabled (unchecked)
Disabled (checked)

Dark mode

Use .form-checkbox-item--dark whenever a checkbox sits on a dark surface -- never the light-mode markup on a dark background.

Default (unchecked)
Checked / selected
Selected hover
Disabled
Disabled selected