Checkbox

Usage

Checkboxes give users a way to make a range of selections (zero, one or multiple). They can also be used to enable or disable an option.

Checkboxes are accompanied by a text label, unless they control the list item or table row. Clicking the text label also selects or deselects the checkbox option.

Checkboxes should always work independently from each other: selecting one checkbox shouldn’t change the selection status of another checkbox in the list. The exception is when a checkbox is used to make a bulk selection of multiple items in lists or tables. *See lists for more clarification

Checkboxes can be stacked vertically or horizontally, according to the amount of data that needs to be shown.

Best Practices

• Text label should always start with a capital letter. At the end of each line, there should be no semicolons, periods or commas.

• The content of the text label should be framed positively, for example to indicate turning an action to “on” instead of “off”.

• Checkbox options should be listed according to a logical order, whether it’s alphabetical, numerical, time-based, or some other clear system.

Checkbox Lists

Checkboxes can be grouped together by using a text label that describes the checkbox group.

Checkboxes can be nested inside the list, where selecting the parent checkbox may or may not also include the child options. For more options, check the List component

Size

Checkbox, as radio, comes in one size only, as it is a UI element with relatively small width and height. To ensure better accessibility, the text label accompanying the checkbox should also be interactive and influence the state of the checkbox.

States

• Checkbox statuses follow the same state styling principles

• Enabled border/background is Grey L50 and white

• Disabled border/background is Grey L50 and Grey L70

• Checked and mixed state background colour is Blue Base

• Checked and mixed state hover state background colour is Blue D30

• Validation states are same as for the buttons

Validation

If checkbox validation is in place, the required field is indicated by using the red colour of the checkbox and the text label - the danger state.

Use in Tables and Grids

When used to control the table row or list item, the checkbox can appear without the text label.

The checkbox placed in the table header is used to control the bulk selection option. It can have an indeterminate state when not all options are selected or deselected. When none of the options are selected, the bulk selection checkbox is deselected as well. If the bulk selection checkbox gets selected, this will also select all the rows shown on the page - depending on the page size.

For more information check the table guidelines.

Best Practices

• Checkboxes inside list and table views only serve for selection purposes, and therefore cannot have disabled state or be validated. When used within a table and the row is not selectable or is not validated, the checkbox should not be visible as the behaviour would suggest the user needs to take action to resolve the validation or they simply can not select the row when it's disabled.

• When the table row is selected with a checkbox, stress the selection by changing the row appearance (for more guidance, check the table guidelines)