Checkboxes

Checkboxes are used for a list of options where the user may select multiple options, including all or none.

Overview

Checkboxes should be used in forms that require submission and processing. The checkbox is shown as a square box that is ticked when it is activated. It allows the user to select one or more options among all the limited choices and requires a button press to confirm the user’s settings before they are committed.

Usage

Use when

  • Affording a binary selection, like accepting terms and conditions.
  • Affording multiple selections from a set of options.
  • Enabling selection of an object, such as a Card.
  • Affording selection of a row within a data Table.
Example
Terms and Conditions

Items That are Not Considered Part of a court requires any other party; and iv) states that any problems introduced by others will not be used for display of characters in the preceding Article shall be reformed to the absence of any other exploitation. Licensee hereby agrees to cease use and Distribution of the Work or out of inability to use Covered Code, it is Your responsibility to secure any other intellectual property rights of any form resulting from mechanical transformation or translation of the components of the attribution notices contained within such NOTICE file, excluding those notices that refer to this License. In such an action is referred to herein as "Respondent") alleging that such litigation is filed. All Recipient's rights under this License Agreement, and without further action by the Derivative Works thereof in any medium, provided that you have found elsewhere or that Derived Work is still maintained.

If any provision of this software without specific, written prior permission. Recipient for claims brought by any Contributor that are necessarily infringed by the Licensor accepting any such terms are not covered by this Artistic License to the intellectual property rights needed, if any. Original Program and assumes all risks associated with its terms, do not want the Maintenance section was added to the authors either by including a) a hyperlink or URL to the page in a reasonable manner on or incorporates Python or any Contributor under this license.

Dispute Resolution. Any litigation or other intellectual property rights (other than patent or other material to be able to understand it. Application of This License. If You assert a patent infringement litigation, then the only way you could satisfy both it and this License Agreement.

Checkboxes should be used for instances that require submission.

Don’t use when

  • Turning a feature, mode, or functionality on and off. Instead, use a Switch.
  • Checking or unchecking elicits an immediate change in the UI or functionality, such as enabling a disabled field or revealing more controls. Instead, use a Switch.
  • Checking or unchecking elicits a change in background functionality without affecting the UI, like disabling an email notification. Instead, use a Switch.
  • John Doe Online
  • Bob Smith Online
  • Jane Doe Offline
  • Mary Smith Offline
  • Jack Ryan Offline
Don't use checkboxes to control UI elements. For this example, a Switch would be used instead.

Specifications

  • Checkboxes use the same :hover and :active styles as the primary Button when checked.

Behaviors

  • Reflects the affirmative (“yes” or “true”) of its label when checked.
  • Choices made via checkbox should always be submitted or saved using a Button.
  • A checkbox’s label is included in the clickable target area.
  • The default view of a set of checkboxes is having no option selected.

Editorial

  • Checkbox labels may be capitalized in 2 ways, depending on their length and placement on the UI:
    • Use title case for short labels (fewer than 3 words) that are to the left or above a checkbox.
    • Use sentence case for longer labels (more than 3 words) that are placed to the right of a check box, especially if the label reads like a phrase.

Default

  • Use full sentences with punctuation.
  • If user is consenting to something, start the sentence with “I,” and also run the phrasing you choose by compliance.

Groups

  • Use full sentences with punctuation for the checkbox group label.
  • Try to keep checkbox labels brief and start them with verbs.

Accessibility

  • The checkbox has role checkbox.
  • The checkbox has an accessible label provided by one of the following:
    • Visible text content contained within the element with role checkbox.
    • A visible label referenced by the value of aria-labelledby set on the element with role checkbox.
    • aria-label set on the element with role checkbox.
  • When checked, the checkbox element has state aria-checked set to true. When not checked, it has state aria-checked set to false. When partially checked, it has state aria-checked set to mixed.
  • If a set of checkboxes is presented as a logical group with a visible label, the checkboxes are included in an element with role group that has the property aria-labelledby set to the ID of the element containing the label.
  • If the presentation includes additional descriptive static text relevant to a checkbox or checkbox group, the checkbox or checkbox group has the property aria-describedby set to the ID of the element containing the description.
  • Use fieldset to create a checkbox group.
  • When the checkbox has focus, pressing the “Space” key changes the state of the checkbox.
What's Changed
DateVersionNotesContributors
11/23/20201.0.0Outline color changed to be accessible. Background color added for emphasis.E. Bohn, L. Kause, N. Springer