Checkbox

Checkbox allows users to select one or more options from a visible list.

Use checkbox when you can select more than one option or when there's only one binary option (for example, when a user needs to choose whether they want to sign up for a newsletter). If placed near a text input, avoid having a check box too close to it.

☝️ Research insight: When testing the sign up form for our Feed-in-Tariff, users did not complete the electronic signature text input. They ticked a checkbox immediately next to the text box and assumed that they only had to complete one of the two.
👀 See also:

Use Radio Buttons or Dropdown to allow users to only choose one answer from the list.

Variants

A basic Checkbox

Error state

We use this when we need members to agree to certain terms and conditions. We treat this component as fieldset with error message rather then invidivudual checkbox in error state from user perpsective.

Custom label size

You can customise the label size of a checkbox by using the prop labelSize. The labelSize prop can be passed any Typography scale token. The default token is mouse