Blueweb
How to use
Checkboxes are used when users can select multiple options from a list. Each checkbox operates independently, even within a group. Use checkboxes in contexts such as:
- Selecting multiple filters or settings
- Accepting terms or agreements
- Selecting items from a list
Checkboxes can be used individually or grouped. When used in groups, they allow for multi-selection without exclusivity.
Do’s and Don’ts
Do
Use aero-space-fix-md for related checkboxes in a group.
Don't
Don’t place checkboxes too close together, it makes scanning and tapping harder.
Do
Stack checkboxes vertically for better readability.
Don't
Avoid horizontal alignment. It’s harder to scan, especially on smaller screens.
Do
Use a radio button when there’s only one option to choose.
Don't
Don’t use a group of checkboxes for single-choice selections.
Accessibility
Checkboxes need to, at all times, indicate their accessible name, their role (checkbox/switch/toggle), and their value (checked/unchecked, off/on, etc.).
The accessible name is derived from it's associated label (if present), or by explicitly setting it (aria-label). Not setting either of these results in a violation of the Web Content Accessibility Guidelines (WCAG).
A checkbox must be togglable using the spacebar key, and reachable using traditional keyboard navigation patterns (tab navigation).
Content
- Keep labels short and clear: Say what the checkbox does in a few words.
- Start with keyword: Put the most important words at the beginning.
- Use sentence case: Only capitalize the first word and proper nouns.
- Avoid double negative: Say “Receive updates” instead of “Don’t opt out of updates.”
- Be specific: Use “Subscribe to newsletter” instead of just “Subscribe.”
Availability
Each global component provides a shared design direction across platforms. Implementation is owned by each platform team, so development status may vary per platform.
Mobile
Kiosk
Design status
Ready