Patternfly Logo

Checkboxes are used to select something. They can be used to reflect a binary setting or for selecting elements to perform an action.

Usage

Checkboxes allow users to choose one or more items from a list of options.

Example of form question with checkboxes aligned horizontally

You can also use a single checkbox to allow a user to enable or disable a feature or setting, along with a save button.

Example of single checkbox

General guidelines

  • Use checkboxes if you’re presenting 5 or fewer options to the user. If you’re presenting more than 5 options, use a select list instead.
  • Use checkboxes if the user can select multiple options. If the user can only select one option, then use radio buttons.

Labeling and alignment

Checkbox labels fall to the right of the checkbox control. If placed vertically, all checkbox controls should be aligned with the left edge of other controls or input fields, in the form or on the page.

You can use headings to label a group of checkboxes. The placement of headings will depend on the layout of other content in the form or on the page you’re designing. For more information on how to arrange checkboxes, see the forms documentation.

Example of a group of checkboxes

You also have the option to use progressive disclosure by nesting other controls underneath a checkbox. The nested options would be enabled or disabled when the user selects or deselects a checkbox.

Example of nested control checkboxes

When to use switches versus checkboxes

The main difference between a switch and a checkbox is that a switch changes an option and saves it simultaneously, while checkboxes require a separate action such as pressing a “Submit” or “Save” button to save the selection.

Here are some guidelines for when to use a switch versus a checkbox:

  • Use checkboxes when the options do not save automatically and require the user to perform an additional action to save changes (in this case, pressing the “Save changes” button).

    Example 1 of do and don'ts for checkbox vs switch usee
  • Use a switch for situations where you are turning a series of one or more independent options on or off.

    Example 2 of do and don'ts for checkbox vs switch usee
  • Use checkboxes when you may have an intermediate state where you can select all, none, or some actions.

    Example 3 of do and don'ts for checkbox vs switch usee

View source on GitHub