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.

    OverviewPropertiesUsageChangelog

    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