# Checkbox

A checkbox is a form control that allows users to select one or multiple options.


## Overview

### Variants

*   **Default**
    
*   **Contained**: Coming soon Used on its own or together with other form components.

### Features

#### Label

All individual checkboxes must have a label to ensure clarity and accessibility. When checkboxes are grouped, the group must have a header label. Labels help users understand the purpose of the checkboxes, including those using assistive technologies.

#### Optional field indicator

Only use in the header label. We only ask for required information. If some fields are optional, we let users know by adding "(optional)" in brackets next to the field label. The word "(optional)" is shown in regular font weight to distinguish it from the label.

### Support text

This can be used for both the header and individual checkboxes. Use this to explain how to fill in the field, for example how to count or what to include. Contained checkboxes don’t have support text for the individual checkboxes.

### Contextual help

If the label and support text are not enough to explain a field, we can use the info icon. Clicking the icon shows additional support text between the label support and the field.

*   Use a tooltip if space is limited.
    
*   Use a modal for large amounts of text.

### Error message

Used to indicate that a single checkbox must be checked or that a group of checkboxes has errors.

### Indeterminate state

Used when a checkbox is partially selected, typically in parent-child relationships within nested checkboxes. Not available for the contained variant.

### Behaviour:

*   If some child checkboxes are selected, the parent shows the indeterminate state.
    
*   If all child checkboxes are selected, the parent appears selected.
    
*   Selecting a parent checkbox (whether unselected or in the indeterminate state) selects all child checkboxes.
    
*   Deselecting the parent checkbox deselects all child checkboxes.

### Alignment

Checkboxes can be aligned horizontal or vertical.

*   **Vertical**: This is the default alignment. It's easier to read and scan the available options.
    
*   **Horizontal**: Only used for a small set of options if the page shouldn't be to long, but try to avoid.

### Do's and don'ts


## UX Guidelines

### Writing UX text for checkboxes

### Stand-alone checkbox

### Use the “I” form

### Don't

### Avoid negations

### Avoid questions

### Multiple options

### Do

### Don't