The Good, The Bad and The UX

A collection of UX patterns with comparative examples

Back to all examples
FormsNew

Checkboxes for hierarchical selection

Use checkboxes with indeterminate state for parent-child option hierarchies. Toggles cannot express partial selection.

checkboxtogglehierarchyindeterminateform

Bad example

Select countries you've been to

Good example

Select countries you've been to

Checkboxes for Hierarchical Selection

Description

When options form a parent-child hierarchy, use checkboxes. Checkboxes support an indeterminate (mixed) state that communicates "some but not all children are selected." Toggle switches only support on/off, making partial selection invisible.

Why it matters

  • Indeterminate state: A parent checkbox can show a dash when only some children are selected — toggles cannot
  • Visual hierarchy: Checkboxes with indentation clearly communicate the parent-child relationship
  • Accurate state representation: Users can instantly see whether all, some, or no children are selected

When to apply

  • Permission systems with nested scopes
  • Category trees with selectable subcategories
  • Settings grouped under a parent toggle-all option
  • Any nested multi-select structure

When not to apply

  • Flat, independent settings with no relationship (use toggle switches)
  • Binary on/off with immediate effect (use a toggle switch)

Published on Feb 10, 2026

Explore more examples

Forms

Checkboxes for grouped selection

Use checkboxes when users select from a group of options that require explicit confirmation before taking effect.

checkboxtoggleformselection
View example
Forms

Toggle switches for immediate settings

Use toggle switches for independent settings that take effect immediately, not checkboxes that imply deferred action.

togglecheckboxswitchsettings
View example
Forms

Dropdown usability

Replace long dropdowns with searchable select components for better usability

formselectinputaccessibility
View example