A checkbox lets the user set a binary value (such as “true/false”). When the user clicks the checkbox, it toggles between checked and unchecked. Checked means that the state described by the checkbox text applies, or that the item has been chosen.

The checkbox text describes the positive action (as in “true” or “yes”). The text can be either a label control to the left of the checkbox, or a checkbox text that appears to the right of the box.

• If there is only one checkbox, you can use a label or text depending on the form format.
• If there is more than one checkbox, the label describes the whole group of checkboxes. In this case, use the text property of the checkbox to describe the individual checkboxes.

Within a group of checkboxes, each checkbox can be checked or unchecked. The user can check multiple options.

A checkbox does not apply a setting right away; the changes take effect after user confirmation via a triggering action button (such as Save).

Usage

Use the checkbox control if:

• Only one option can be selected or deselected, for example to accept terms of use. Use it only if the meaning is obvious (single checkbox).
• You have a group or a list of options that can be selected independently of each other (checkbox group).
• Your use case requires all available options to be displayed right away without any user interaction (also in read-only cases).
• The values of the option list are primary information and need to be displayed right away.
• Changes to the settings need to be confirmed and reviewed by the user before they are submitted. This helps prevent users from changing settings accidentally.
• You want to group multiple suboptions under a parent option, and require an intermediate selection state (tri-state). The tri-state indicates that some (but not all) suboptions are selected.
• The states of a switch control might be confusing for the user. For example, it’s not clear if the switch is showing a state or an action.

Do not use the checkbox control if:

• The user needs to choose multiple options from a large list. Use a multi-combo box instead.
• The user can choose only one option from a list. For a small list, use a radio button group instead. For a large list, use the select control or a list with multi-selection functionality.
• You want to offer two options for a “yes/no” or “on/off” type of decision. Consider using a switch control instead.
• The user needs to perform instantaneous actions that do not need reviewing or confirming. Consider using the switch control instead.
• There is not enough space available on the screen. Use the combo box control instead.

Responsiveness

A checkbox can appear in two different sizes. In cozy mode, it is bigger than it is in compact mode. This makes the checkbox easier to select on touch devices. For more information on cozy and compact modes, see the article on content density.

In both sizes, the touch/click area around the checkbox is bigger than the checkbox itself, making the checkbox easier to select. Clicking inside this area toggles the checkbox.

Note: Because the touch/click area does not include the label on the left, clicking the label will not toggle the checkbox.

Properties

You can set the width of the element containing the checkbox and the text manually (property: width).

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.