Checkbox

Checkboxes let users select
one or more options from a group of options

Ref to 90:2320
Ready to Use
Show details
Ready to Use
Published: March 02, 2023
Updated: March 05, 2024

Introduction

Checkboxes are used for selecting multiple choices rather than mutually exclusive options out of a list of options. Each checkbox in a list operates independently, so checking an additional box does not impact the selections made in other checkboxes. When using a stand-alone checkbox [a single option that isn't part of a larger group], it presents a binary choice, allowing the user to either select or deselect an option.

  • Checkboxes can be used in forms to display mutually choice options
  • stand-alone checkbox can be used in clear context as a binary yes/no option, e.g. as an opt-in for GDPR during registration, or as a “Remember me” option during sign in. If an on/off option is needed, use toggle switches instead.
  • By default, all form elements are mandatory; label them as optional only if they are indeed optional.

Usage

Checkboxes work best when there are seven or fewer options to choose from. To ensure readability, it is recommended to limit the checkbox label to a single line.

Further, don't check options by default to avoid dark UX patterns.

Ref to 90:2305
Ref to 90:2408
Ref to 90:2397
Ref to 90:2425
Ref to 90:2391
Ref to 90:2394
Ref to 98:3891
Ref to 98:3900

Mobile Usage

On screen-widths smaller than 576px, the width of the checkbox should be set to 100vw.

Ref to 90:2308
Ref to 90:2413