Checkbox

Usage

Example

Principles

• If the user can only select one option from a list, use radio buttons instead.
• Checkbox label should always clearly describe what will happen if the specific option is chosen. A good practice is to keep labels a maximum of three words long.
• Checkboxes work independently from each other. This means that checking one option should never affect other checkboxes.
• If Checkboxes are related to each other, use HDS Selection group to achieve that.
• Checkboxes should not have any immediate effects. The checkbox selection takes effect when the user presses a submit button (e.g. in a form). If you need the selection to have an immediate effect, use HDS Toggle button component instead. Also see guidelines for choosing between radio buttons, checkboxes and toggles.
• Checkbox can be provided with additional tooltip. Tooltip information should be considered as extra information. You can find more information about Tooltips how they are used from the Tooltip documentation page.
• If some other component is used as the label for the checkbox by using <label for="checkbox_id">, the label parameter of the checkbox itself should not be given at all (affects the layout).

Variations

Default

Checkbox group

Related checkboxes can be grouped together with the Selection group component. See HDS Selection group page for full documentation.

Indeterminate

Checkboxes also have a "mixed" state that is called an indeterminate state. This state is meant to be between the checked and unchecked states. While not very common, the usual use case for the indeterminate state is nested checkboxes. The parent checkbox can be in the indeterminate state when only part of the children checkboxes are checked.

Note! You will always have to use JavaScript to set a checkbox to the indeterminate state. Currently, it cannot be done through HTML. The HDS React component will do this part automatically when the indeterminate property is given.