HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
Guidance
Usage
CheckBox outside of FormField
Toggle
Accessibility
Variants
CheckBox with description
Toggle
Validation
Disabled
Components

CheckBox

CheckBox is a square design element that when clicked accepts the choice offered.

Guidance

CheckBox can be used to present an individual option or group of options to the user. When presented in a group, the user can select a single or multiple options. Refer to CheckBoxGroup for examples.

Usage

CheckBox should not be used if a user should only be allowed to select one option from a list of options. In the case that a user should only be able to select one option, refer to RadioButtonGroup.

There are three states which CheckBox provides:

  • Unchecked - Value has not been selected.
  • Checked - Value has been selected.
  • Indeterminate - Used in situations where the CheckBox is a parent to a list of child options. Use the indeterminate state to indicate that only a subset of the child options have been checked.

Checked and unchecked states refer to when an individual CheckBox is checked or when all options from a group are checked.

CheckBox outside of FormField

A checkbox might be used outside of a form field when:

  1. Serving as a UI control showing or hiding page content, such as revealing additional content or inputs which are only relevant when a particular feature is enabled.
  2. Scenarios in which having a form field label in addition to the checkbox label would be redundant for the user.
  3. Allowing a user to opt-in or acknowledge a disclaimer, such as a privacy policy or terms and conditions.
  4. Allowing an item to be selected within a list, table row, or drop down.

By default, CheckBox has built-in pad to create space between the CheckBox and FormField border therefore when using checkbox alone pad="none" will need to be applied. When using CheckBox outside of FormField, it does not have a border or label. The hover indicator is applied to the checkbox itself.

Toggle

  • Toggle is a single option which prompts users to choose between two mutually exclusive options.
  • Toggle is preferred to quickly switch between two possible states. Toggles usually provide immediate results (i.e. no form submission is required) in which gives users the ability to control their preference.
  • When using toggles the order of text and toggle can be controlled using the reverse prop. If the toggles are used in a group that contains only toggles then it is preferred to have the text on the left and the toggle on the right.

Accessibility

CheckBox should be used inside of a FormField to ensure that a label is properly associated with the input. The labels on individual checkboxes should clearly describe the purpose of the checkbox.

If a CheckBox is used outside of the context of a FormField, it is important to meet accessibility requirements in an alternate way. There should always be clear visual indication, either by text or icon, that describes the purpose of the checkbox.

Variants

CheckBox can be used individually, within a group, or as a toggle. A standalone or toggle checkbox indicates that a user is opting-in to the context of the checkbox. Within a group, one or multiple checkboxes can be selected.

CheckBox with description

Adding a description provides the user additional information about the context or purpose of the checkbox.

Checkbox description

Toggle

Toggle is a great choice to use when the user is given a single option that they can turn on or off.

Validation

Validation is used to show that the checkbox does not meet the validation requirements of its bounding FormField.

Check checkbox to resolve error.
Check toggle to resolve error.

Disabled

Used to indicate that CheckBox cannot be interacted with.

Related

Related content you may find useful when using CheckBox.

CheckBoxGroup

CheckBoxGroup is a component that presents related checkbox options.
HPE Forms Preview

Forms

Common form use cases from application configuration to payment acceptance.

RadioButtonGroup

RadioButtonGroup is a component that offers related options to a user, but only allows them to choose one.

Select

Select is a flexible input field that allows users to choose from a list of options.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page