Checkbox Component

Overview

Checkbox animates its indicator, fills from the centre, and adds a subtle elastic response on selection, without changing how a checkbox behaves. Options can be compact inline controls or larger selectable cards, and groups support select all, clear, Shift-click ranges, a live counter, minimum and maximum limits, and drag reordering.

Use it when users choose several independent options, such as features, notification preferences, onboarding interests, or permissions. Animation should confirm each choice while selection rules stay predictable.

Theme and Interaction Customisation

Choose inline or card layouts, muted or primary card fills, a check or circle mark, filled or outlined boxes, corner roundness, per-option colours, and an animated strike-through. Interactions include centre-out fills, elastic compression, bulk actions, Shift-click ranges, and drag reordering.

Example Production Use Case

A SaaS onboarding step can present capabilities like Analytics, Automation, and Reporting as selectable cards, with at least one and at most four allowed. The counter updates instantly, and a fifth choice is blocked until another is cleared.

A notification settings page can group email and push categories as inline checkboxes, with Select all and Deselect all for quick bulk changes.

A meal-kit or product configurator can use colour-coded cards for add-ons, letting customers reorder chosen items when sequence matters.

Best Used For

• SaaS onboarding with counts and selection limits.
• Product configuration with multiple add-ons or options.
• Application settings such as notification categories.
• Surveys and questionnaires that allow several answers.
• Administrative interfaces selecting records or permissions.
• Creative and productivity tools using selectable cards.
• Standalone acknowledgements and terms acceptance.

Not For

When users must choose exactly one option, Radio is clearer. For settings that switch on and off immediately, Switch communicates that better.

Very long option lists need search, grouping, or filtering, since bulk actions don’t fix discovery problems.

Complex hierarchical or dependent permissions suit a tree selector or structured configuration flow better than a flat checkbox group.

Performance Budget

Keep checked-state animations short and separate from the value update, so counts and form state change instantly. Reconcile bulk and Shift-click changes in a single state update, preserve item identity during drag, and avoid animating unaffected items in large groups.

Accessibility and Mobile

Use native checkbox semantics with labels, a fieldset and legend for groups, Space to toggle, and limits explained in text, not just disabled styling. Bulk actions must be keyboard-operable, and Shift-click and drag need alternatives. On mobile, keep tap areas large and cards responsive, and with reduced motion simplify fills, bounce, and strike-through.

Common Mistakes

• Treating the minimum as a hard block rather than validation feedback.
• Letting Select all exceed the maximum or include disabled options.
• Letting fills, labels, and counters drift from the real selected values.
• Moving a checked state to another item during reordering.
• Making Shift-click the only efficient way to select many items.
• Applying card fill colour to inline checkboxes.
• Expecting icon animation or mark styles to show when the icon is hidden.
• Using colour as the only selection indicator.
• Preselecting consent checkboxes.
• Overanimating ordinary selection.