Checkbox

Status: Aetna CVS View in iOS SDK Reference

A common input control for users to select one or more options from a number of choices.

Types

Basic

Table Cell

Usage

Use for forms where users can choose from a group of options.

Use in a Table for common form layouts
Checkbox groups should always have a Section Header that clearly defines or explains what the grouped options are for
Use for forms where users can make multiple selections
Use for forms where users can toggle something on or off
Avoid pairing with other interactive elements, such as a tooltip or link

Behavior

Checkboxes should operate independently of each other, except when a “Select all”-type option is presented

Visual Style

Always maintain 44pt minimum hit area for each option

Content Strategy

The overall content goal of Checkbox is to present selections with appropriate scope and style for the screen’s context. A major consideration for the content strategy is whether Checkbox stands alone or appears in a set.

Section Headers

  • A standalone Checkbox typically appears within an established section, requiring no additional Section Header
  • A set of Checkboxes requires a Section Header to introduce the selections as a whole
  • Think of Section Headers as a tone-setter for the content that follows

Grammar & Punctuation

  • Selections should follow best practices for capitalization and punctuation. For example, more complex selections should be Sentence case, using end punctuation only if a full sentence.
  • Sets, simple and complex, should adhere to parallel syntax

Actions

  • Because Checkbox is inherently selectable, actions are not required to highlight that behavior

  • Instead, use actions to clearly define the selection’s intent— bringing clarity to a standalone Checkbox or better distinguishing selections in a set

Character Count

Checkbox can accommodate multiple lines, but as with all selection-related content, short and sweet options make it easier for users.

Accessibility

Characteristics

  • One/multiple Checkboxes can be checked
  • Tapping label or icon checks/unchecks the Checkbox
  • Label clearly identifies purpose for Checkbox
  • Groups of Checkboxes require a Section Header to act as a group label

Keyboard/Focus Expectations

  • Enabled and disabled Checkboxes receive visible focus with VoiceOver
  • Tap checks/unchecks the Checkbox

Screen Rreader Expectations

  • Reading order: “unchecked/checked, {Checkbox label}, {Checkbox group label}, Checkbox”
  • If disabled: “unchecked/checked, {Checkbox label}, {Checkbox group label}, Checkbox, dimmed”
↑ Back to top