Components
Checkbox
Checkbox allows users to select one or more options. It can also be used in situations where the user needs to confirm something.
HTML
Unable to parse html
const Preview = () => { return ( <Checkbox label='Checkbox label' description='Description' value='value' /> ); }; render(<Preview />)
Use checkbox when
- the user should be able to select one or more options within the same context
- the user needs to accept terms and conditions
Avoid checkbox when
- the user should choose only one option; use a radio instead
- the user must choose from more than seven options; use a select or suggestion instead
- something should be turned on or off; use a switch instead
Example
Confirmation with checkbox
If the user must confirm something rather than choose between alternatives, a single checkbox can stand alone. For example, when the user needs to confirm that something is correct or give consent to terms and conditions.
A checkbox for consent must always require an active action, and you should never preselect the box. This ensures that the consent is given voluntarily.
HTML
Unable to parse html
const OneOption = () => ( <Fieldset> <Fieldset.Legend>Bekreft at du er over 18 år</Fieldset.Legend> <Fieldset.Description> For at vi skal kunne sende deg opplysningen du ber om, må du bekrefte at du er myndig. </Fieldset.Description> <Checkbox label='Jeg bekrefter at jeg er over 18 år' value='samtykke' /> </Fieldset> ); render(<OneOption />)
Grouping
Most of the time, checkbox is used in groups where the user can select more than one option.
HTML
Unable to parse html
const GroupEn = () => { const { getCheckboxProps } = useCheckboxGroup({ value: ['email'], }); return ( <Fieldset> <Fieldset.Legend>How would you prefer us to contact you?</Fieldset.Legend> <Fieldset.Description> Select all the options that are relevant to you. </Fieldset.Description> <Checkbox label='E-mail' {...getCheckboxProps('email')} /> <Checkbox label='Phone' {...getCheckboxProps('phone')} /> <Checkbox label='Text message' {...getCheckboxProps('text')} /> </Fieldset> ); }; render(<GroupEn />)
With error
When checkboxes are used in groups, the error message should be shown collectively for the entire group.
HTML
Unable to parse html
const WithError = () => { const [error, setError] = useState(''); const { getCheckboxProps, validationMessageProps, value } = useCheckboxGroup({ value: ['epost'], error, }); useEffect(() => { if (value.length < 2) { setError('Du må velge minst to alternativ'); } else { setError(''); } }, [value]); return ( <Fieldset> <Fieldset.Legend> Hvordan vil du helst at vi skal kontakte deg? </Fieldset.Legend> <Fieldset.Description> Velg alle alternativene som er relevante for deg. </Fieldset.Description> <Checkbox label='E-post' {...getCheckboxProps('epost')} /> <Checkbox label='Telefon' {...getCheckboxProps('telefon')} /> <Checkbox label='SMS' {...getCheckboxProps('sms')} /> <ValidationMessage {...validationMessageProps} /> </Fieldset> ); }; render(<WithError />)
Outline
In some cases, it may be appropriate to emphasise options by using a larger click area around the checkbox.
This can for example be appropriate when:
- the option represents a clear decision point that should stand out in the interface
- related information (such as descriptions and additional details) should be perceived as a single, coherent interaction
- standard checkboxes would result in a visually weak layout
HTML
Unable to parse html
const OutlineEn = () => { const { getCheckboxProps } = useCheckboxGroup({ value: ['operations'], variant: 'outline', }); return ( <Fieldset> <Fieldset.Legend> Which notifications do you want to receive? </Fieldset.Legend> <Fieldset.Description> Choose the notification types that are relevant to you. </Fieldset.Description> <Checkbox label='Service updates' description='Alerts about planned maintenance and service disruptions.' {...getCheckboxProps('operations')} /> <Checkbox label='Reminders' description='Alerts about deadlines and tasks that need your attention.' {...getCheckboxProps('reminders')} /> </Fieldset> ); }; render(<OutlineEn />)
Read-only checkbox
Checkbox supports the readOnly attribute to make the field non-editable and gives a visual indication that distinguishes it from editable fields. Although they cannot be changed, fields with readOnly are still part of the tab order, and the information is included when the form is submitted.
We avoid using readOnly whenever possible because such fields can be confusing. Not all users will understand why they cannot change the content.
HTML
Unable to parse html
const ReadOnly = () => ( <Checkbox label='Checkbox label' description='Description' value='value' readOnly /> ); render(<ReadOnly />)
Disabled
We should avoid disabling (disabled) checkbox, because it can be difficult to perceive.
Some users will not understand what the option means or why it is not clickable. If a checkbox or group of checkbox options is not relevant, it is usually better to remove them rather than disable them. If possible, give users an explanation of why options are unavailable.
Nav has a helpful explanation of why disabled states are problematic (nav.no) and which alternatives exist.
HTML
Unable to parse html
const Disabled = () => { const { getCheckboxProps, validationMessageProps } = useCheckboxGroup({ value: ['epost'], disabled: true, }); return ( <Fieldset> <Fieldset.Legend> Hvordan vil du helst at vi skal kontakte deg? </Fieldset.Legend> <Fieldset.Description> Velg alle alternativene som er relevante for deg. </Fieldset.Description> <Checkbox label='E-post' {...getCheckboxProps('epost')} /> <Checkbox label='Telefon' {...getCheckboxProps('telefon')} /> <Checkbox label='SMS' {...getCheckboxProps('sms')} /> <ValidationMessage {...validationMessageProps} /> </Fieldset> ); }; render(<Disabled />)
Guidelines
Use checkbox when the user can select one or more options.
Sort the options
Sort the answer options alphabetically unless there is a good reason to do otherwise. Be careful about placing the most common answer option first if the question is personal or value-based, such as sexual orientation or party affiliation.
Placement
Preferably place the response options vertically. This makes it easier to scan the list and read the options. For users who need to enlarge the text, horizontal lists can be challenging.
Do
Don't
Text
-
The question should connect well with the response options. Think of the text as a conversation, and use “you” in the question and “I” in the options.
-
Make it clear that users can choose multiple options, and specify it if they can only choose a limited number of options.
-
Response options should always start with a capital letter.
Read more about how to write labels, questions and answer options in forms.
Edit this page on github.com (opens in a new tab)