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. 




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

2. Unchecked checkbox

3. Checked checkbox

4. Partially checked checkbox



View Developer Docs


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