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.
React
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 using Checkbox when
- the user should choose only one option; use a
Radioinstead - the user must choose from more than seven options; use a
SelectorSuggestioninstead - something should be turned on or off; use a
Switchinstead
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.
React
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. The <fieldset> around the group should have a legend that explains what the options relate to.
React
const Group = () => { const [value, setValue] = useState<string[]>(['epost']); 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' value='epost' checked={value.includes('epost')} onChange={(e) => { if (e.target.checked) { setValue([...value, 'epost']); } else { setValue(value.filter((v) => v !== 'epost')); } }} /> <Checkbox label='Telefon' value='telefon' checked={value.includes('telefon')} onChange={(e) => { if (e.target.checked) { setValue([...value, 'telefon']); } else { setValue(value.filter((v) => v !== 'telefon')); } }} /> <Checkbox label='SMS' value='sms' checked={value.includes('sms')} onChange={(e) => { if (e.target.checked) { setValue([...value, 'sms']); } else { setValue(value.filter((v) => v !== 'sms')); } }} /> </Fieldset> ); }; render(<Group />)
With error
When Checkbox is used in groups, the error message should be placed on the Fieldset, so it applies to the entire group.
React
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 />)
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.
React
const ReadOnly = () => { const { getCheckboxProps, validationMessageProps } = useCheckboxGroup({ value: ['epost'], readOnly: 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(<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.
React
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.