Checkbox

Design a checkbox component for form and settings use. Show the control as a compact row with a square box, label, and optional helper text. The row should feel easy to scan and easy to tap, with the whole label area acting as the target.

Include the full interaction set: unchecked, checked, indeterminate, hover, focus, and disabled. Show how the checkmark, fill, and border change in each state, and make sure the selected state reads clearly at small sizes.

Also show a checkbox group with multiple options, one required error state, and one partially selected parent item. Keep spacing consistent between items so the group still feels orderly when text wraps or validation appears.

Inject fun into your checkbox design by customizing the appearance when active—think color changes, animations, or even playful tick marks!