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:
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.
You can customise the label size of a checkbox by using the prop
labelSize prop can be passed any
Typography scale token.
The default token is