Checkboxes allow users to perform quick actions on settings that are binary, as they ideally only have an "on" and "off".

Best practices 

  • Use a checkbox control for fields that only include an "on" or "off" state.
  • Ideally a checkbox should only be used if it's state and infered consequences are clear to users. For example, accepting a Terms and Conditions.
  • Group multiple related checkboxes with a group title to set a common context for the group.
  • Avoid using checkboxes that conditionally enable other checkboxes. Ideally use a group of radio buttons to clearly expose each choice.
  • When faced with a more complex use case that requires explaining each state, it is recommended to use a radio button group instead of a checkbox.
  • When a checkbox is responsible for changing a setting, it should be included as a part of a form, which must be submited by the user. In cases where a setting is to be applied immediately a toggle control is the recommended solution. 
     

 

Anatomy

checkboxes

1. Group title
Used to label a group of checkboxes.

2. Unchecked checkbox

3. Checked checkbox

4. Partially checked checkbox

 

Specifications


View Developer Docs

 

HeroLogo
 
© Copyright 2019 BigCommerce
 
 
© Copyright 2019 BigCommerce
Feedback or suggestions to help us improve BigDesign?  Contact Us