Skip to main content

Checkbox

Use the Checkbox to let users select one or more options from a list, or to confirm a selection that requires a further action such as clicking a submit button.

OverviewPropertiesUsage

When to use​

  • When users can select multiple related items from a list.
  • When a single selection doesn't trigger an immediate action and requires a further step to confirm, such as clicking a submit button.
  • When you need an indeterminate state to indicate that some children of a parent checkbox are checked.

When not to use​

  • To toggle a setting on and off. Use Switch instead.

Position​

Four Checkbox components labeled "AIOps", "DevOps", "Security", and "Monitoring", shown stacked vertically on the left and in a single horizontal row on the right.

Four Checkbox components labeled "AIOps", "DevOps", "Security", and "Monitoring", shown stacked vertically on the left and in a single horizontal row on the right.

Vertical​

  • Use vertical alignment in most instances. It's suitable for responsive layouts, a relatively large number of options, or when vertical alignment is consistent in its context, such as in a form.

Horizontal​

  • If you need a horizontal layout, avoid having the options wrap into a new line.

Example of correct horizontally aligned Checkbox components fitting on a single line, and an incorrect group that wraps onto a second line.

Example of correct horizontally aligned Checkbox components fitting on a single line, and an incorrect group that wraps onto a second line.

States​

Checkbox supports three states (unchecked, checked, and indeterminate). Use the indeterminate state to convey that some children of a parent checkbox are checked. For example, a "Select all" checkbox in a table header.

Still have questions?
Find answers in the Dynatrace Community