Resources
Intro & Anatomy
Checkboxes are interactive form controls that allow users to make binary choices or select multiple options from a list. Use checkboxes when users can select one, multiple, or no items from a list e.g. selecting features, agreeing to terms, or filtering content.
Checkboxes can be implemented as standalone controls or grouped together for multiple related options.
MDX offers checkboxes with or without borders for different visual preferences.
Options & Styles
Value
Value are always required for checkboxes to clearly communicate the option or choice being presented to users.
Indicator & Description
Indicator is optional and shows available item counts, e.g. product quantities in shop categories.
Description is optional and provides additional context about the checkbox option.
Variants
MDX offers two checkbox variants:
with border and inside padding without border and no inside padding
States
Checkboxes have multiple interactive states for both unselected & selected:
Default for standard appearance
Hover for interactive feedback
Disabled for unavailable options
Size & Width
Checkboxes have a fixed height of 48px to ensure adequate touch targets and accessibility compliance.
The width is determined by its container and should align with other elements within the same pattern, e.g. form fields and buttons.
Disabled
A disabled checkbox shows that an option exists but isn't currently available, e.g. when certain conditions haven't been met or prerequisites are missing.
The cursor changes to indicate the checkbox is not interactive.
Best Practice & Usage
Checkboxes should communicate their purpose clearly using descriptive labels and be used appropriately for multiple selection scenarios.
Don't check options by default to avoid dark UX patterns.
Use checkboxes when users can select multiple options from a group of choices.
Use radio buttons instead when users can choose only one option from a group.
Give each checkbox a descriptive and short label, making sure all labels are similar grammatically and tonally.
Separate different checkbox groups with clear labels rather than combining unrelated options into one large group.
Use standalone checkboxes with clear context attached to larger content groups.
Never use standalone checkboxes without additional context or clear purpose.
Use stand-alone checkboxes as yes or no options.
Use toggle switches instead of checkboxes for on/off options.
Scale checkboxes to full width on mobile for better touch targets.
Avoid placing checkboxes side by side on mobile to prevent crowding.
Theming
You can customise colours, border width and radius, font styles, spacing, and paddings to match your design requirements.
For checkbox groups, you can also adjust spacing between the group label, individual checkbox items.