A checkbox should be used when the user can select multiple items in a group. Users can select zero, one or any number of items.
When using a checkbox:
The checkbox items should work independently from each other, so selecting one checkbox shouldn’t change the status of another checkbox in the list List your items in a clear way, whether it’s alphabetical, numerical, time-based or some other logical order Always have a unique label attached to each checkbox Visually position your label to the right of the checkbox Programmatically connect each label to its corresponding checkbox If only one item can be selected from the list, use radio buttons instead of checkboxes.
If the user’s action results in an immediate change, use a switch instead of a checkbox.
Stacked checkbox Use a stacked checkbox if there are more than 3 options for the user to choose from.
React editor HTML
Arrow left Arrow right < CheckboxField
label = " Do you have any dietary requirements? "
name = " checkbox-field-1 "
options = { [
{ value : "lactose" , label : "Lactose intolerant" } ,
{ value : "gluten" , label : "Gluten-free" , defaultChecked : true } ,
{ value : "vegan" , label : "Vegan" } ,
{ value : "vegetarian" , label : "Vegetarian" } ,
] }
/>
Inline checkbox Use an inline checkbox if there are fewer than 3 options for the user to choose from and the checkbox labels are short.
React editor HTML
Arrow left Arrow right < CheckboxField
label = " How would you like to be contacted? "
name = " checkbox-field-2 "
listType = " inline "
options = { [
{ value : "email" , label : "Email" , defaultChecked : true } ,
{ value : "phone" , label : "Phone" } ,
{ value : "post" , label : "Post" } ,
] }
/>
Outlined checkbox Use an outlined checkbox to give the options more visual impact and distinction.
React editor HTML
Arrow left Arrow right < div style = { { maxWidth : "20rem" } } >
< CheckboxField
label = " Do you have any dietary requirements? "
name = " checkbox-field-3 "
options = { [
{ value : "lactose" , label : "Lactose intolerant" } ,
{ value : "gluten" , label : "Gluten-free" , defaultChecked : true } ,
{ value : "vegan" , label : "Vegan" } ,
{ value : "vegetarian" , label : "Vegetarian" } ,
] }
outlined
fullWidth
/>
</ div >
React editor HTML
Arrow left Arrow right < CheckboxField
label = " How would you like to be contacted? "
name = " checkbox-field-4 "
listType = " inline "
options = { [
{ value : "email" , label : "Email" , defaultChecked : true } ,
{ value : "phone" , label : "Phone" } ,
{ value : "post" , label : "Post" } ,
] }
outlined
/>
Checkbox with an error message React editor HTML
Arrow left Arrow right < CheckboxField
label = " What products would you like to receive news and offers on? "
name = " checkbox-field-5 "
error = " Please select two or more options to create your personalised newsletter "
fullWidth
options = { [
{ value : "credit" , label : "Credit cards" } ,
{ value : "insurance" , label : "Insurance" , defaultChecked : true } ,
{ value : "loans" , label : "Loans" } ,
{ value : "mortgages" , label : "Mortgages" } ,
{ value : "travel" , label : "Travel" } ,
] }
/>
Standalone Standalone checkboxes let you remove text for more flexibility with the position of the checkbox. Make sure that context is provided to the user by the surrounding content of the checkbox and that the checkbox has an accessible name.
React editor HTML
Arrow left Arrow right < React.Fragment >
< Checkbox name = " checkbox-with-hidden-label " label = " Hidden label " hideLabel />
< Checkbox
name = " checkbox-with-hidden-label-checked "
label = " Hidden label (default checked) "
defaultChecked
hideLabel
/>
</ React.Fragment >
When using a checkbox:
Be clear about what will happen if the checkbox is selected Frame your items positively, for example: ‘How would you like to be contacted?’ instead of ‘How would you not like to be contacted?’ Start your checkbox labels with a capital letter Don’t use commas or any punctuation at the end of each label Don’t use more than three words per label Was this page helpful? Our team can answer any questions about using checkboxes or give you a helping hand with your next project.