What are the checkbox states?

Deep dive

A checkbox, at its core, is a simple binary control: checked or unchecked. However, there are a few nuances to consider for creating more intuitive and convenient interfaces.

How many states does a checkbox have?

There are three core checkbox states: unchecked (default), checked (selected), and indeterminate (partial or mixed).

Unchecked state: 

• Must clearly indicate interactivity through visual design. 

• Should maintain good contrast (minimum 4.5:1) with the background.

• An empty box should be easily distinguishable from the checked state.

Checked state: 

• Use a clear, universally recognized symbol, such as a checkmark. 

• Provide immediate visual feedback when toggled.

• Consider adding a subtle animation for better feedback.

When some checkboxes are selected and others are not, the general checkbox state is set to indeterminate. It’s used for parent checkboxes controlling multiple child components: 

• Typically shown as a minus sign (−) or filled square.

• Should be clear this is a system-set state (users can't directly toggle it).

• Common in data tables and nested lists.

📚 Related reading: How to design a checkbox and avoid common mistakes?

When is an indeterminate state appropriate?

It’s appropriate when dealing with partial selections within a group of options, especially in hierarchical structures or multi-select lists where not all checkbox options are fully checked or unchecked. 

Consider it when the concept of "partial selection" is meaningful in the user interface and when the relationship between checkboxes is critical.

Source

Common usage patterns:

1. Parent-child relationships:

• Description: In hierarchical selections like folder structures or nested categories, a parent checkbox controls a set of child components.

• Implementation: The parent checkbox shows an indeterminate state when some but not all child components are selected.

• Examples: File explorers, email clients, and settings panels.

2. Batch operations:

• Description: In data tables or lists where users can select multiple items for bulk actions.

• Implementation: An indeterminate state indicates that only some items are selected.

• Benefit: Helps users understand mixed selection states during bulk operations.

3. Complex state dependencies:

• Description: When a checkbox's state depends on multiple underlying conditions.

• Implementation: An indeterminate state represents partial activation or mixed conditions.

• Examples: Feature toggles that are partially enabled across different user groups in admin panels and configuration interfaces.

Example in an enterprise setting:

When managing user permissions, permission could be "granted," "not granted," or "partially granted" (indeterminate), such as when a user has restricted access. Using an indeterminate checkbox or a three-state switch captures all selectable states and provides clarity in permission management interfaces.

Key questions to consider:

• Can users easily understand the current state?

• Is the interaction model clear?

• Would hiding the complexity reduce user understanding?

• Does it reduce clicks for common tasks?

• Are parent-child relationships obvious?

• Is keyboard navigation working?

• Do screen readers announce states correctly?

What states do designers often forget about?

In addition to unchecked, checked, and indeterminate states, checkboxes also have focus and disabled states.

A disabled checkbox is used when an interaction is prevented (can be either checked or unchecked): 

• Use reduced opacity (typically 0.4-0.5).

• Remove hover effects.

• Maintain the current checked/unchecked state but gray it out.

• Add disabled attribute for screen readers.

Focus state is a visual indicator for keyboard navigation:

• Must have a visible focus indicator (usually a ring).

• Should meet WCAG 2.1 focus visibility requirements.

• Maintain consistent focus styling with other form controls.

📚 Related reading: What checkbox types should be considered for better usability?

How to maintain accessible usability when checkboxes are inactive?

1. Use a muted color or desaturated version of the checkbox's regular color to indicate the disabled state. Ensure that there's enough contrast between the component’s color and the background.

2. Applying a lower opacity to the component or its label can visually convey the disabled state. However, be cautious not to make it too faint, as it might become hard to distinguish.

❓Questions designers should ask themselves

By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.

• How do users typically interact with similar controls?

• What feedback do we provide on interaction?

• Are the interaction states clearly distinct?

• How do we handle error states?

• Does our checkbox styling align with our design system?

• Is there sufficient contrast in all states?

• How do we handle touch targets on mobile?

• How often will keyboard navigation be used?

• Is the checkbox keyboard accessible?

• Does it work properly with screen readers?

• Are we using proper ARIA labels and roles?

⚠️ Common mistakes to avoid

Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.

• Subtle state differences;

• Inconsistent focus indicators;

• Poor touch targets;

• Unclear parent-child relationships;

• Confusing indeterminate behavior;

• Slow state updates;

• Inconsistent behavior across viewports.

🤝 Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

• Design Snippets: Checkboxes

📚 Keep exploring 

Never stop growing. Explore resources thoughtfully handpicked by Cieden’s designers.

• How to design checkboxes by Ross Horbi