Checkbox

Usage

Checkboxes are commonly used for multiple choice settings or actions - one or more items from a set - that may a require a user’s approval or consideration before submission or saving. Checkboxes can turn an option on or off. (you can use a single checkbox to allow a user to enable or disable a feature or setting, along with a save button). Use checkboxes to:

• Select one or more options from a list.
• It is suggested to use Checkbox for 5 or fewer options to the users. If you are presenting more than 5 options, nest Checkboxes inside a Select component’s dropdown menu instead.
• In a list containing sub-selections.
• Turn an item on or off in desktop environment.
• When you may have an indeterminate state where you can select all, none, or some actions.

Types

There is one type of Checkbox component but its default status can be either Checked, Unchecked or Indeterminate depending on the use case.

Anatomy and Behavior

1. Container - The container within which the box and label lie. It is also the clickable area. It is also the default clickable area.

2. Label - By default Form Label atom is used here. Label is the description of what is being controlled by this particular Checkbox. Labels can be as short as a word or a phrase or as long as a paragraph. Component’s native label can be deactivated and a different element can be used if the description requires a special formatting (e.g. secondary text fields for smaller disclaimers). No need to include “Checked” and “Unchecked” texts as Label since the Checkbox status is sufficient in itself. The label optionally can be made non-clickable.

3. Icon

4. Box - The actual box that represents if the particular option/s are selected or unselected or have mix of both.

Behavior Checkbox can be checked, unchecked or indeterminate by default depending on use case. Clicking on the checkbox checks or unchecks depending on initial state.

Parent and Child checkboxes: Checkboxes can have a parent-child relationship with other checkboxes. When the parent checkbox is checked, all child checkboxes are checked. If a parent checkbox is unchecked, all child checkboxes are unchecked. If some, but not all, child checkboxes are checked, the parent checkbox becomes an indeterminate checkbox.

Differences between Radio select, Switch and Checkbox: Radio Selects and Switches are alternative selection controls that can be used to enter decisions or declare preferences such as settings or dialogs, however there are some differences and for better user experience we should use the component that fits best.

The main difference between a Switch and a Checkbox is that a switch changes an option and saves it simultaneously, while checkboxes require a separate action such as pressing a “Submit” or “Save” button to save the selection.

Checkboxes should be used instead of Radio select if multiple options can be selected from a list. Radio select is mutually exclusive.

States

Each status of a Checkbox, namely, Selected, Unselected and Indeterminate has hover, active, focus and Disabled states.

Gaps and Sizes

CHECKBOX

• Size of the box: M+
• Box padding: 2XS
• Border Radius: 3XS

CHECKBOX (WITH LABEL)

• Gap between Form label and box when label is on the right: S
• Gap between Form Label and box when label is on the left : Fill available space (or Auto), but with minimum gap of S
• Label alignment: Center aligned

Tokens

SCSS Variable

Value

$checkbox-checked-bgColor

--bds-brand-primary-color

$checkbox-checked-bgColor--locked

--bds-brand-bgColor--locked

$checkbox-checked-outline-color--focus

--color-azure-45

$checkbox-icon-color

--color-grey-98

$checkbox-icon-color--locked

--color-grey-86

$checkbox-indeterminate-bgColor

--bds-brand-primary-color

$checkbox-indeterminate-bgColor--locked

--bds-brand-bgColor--locked

$checkbox-indeterminate-outline-color--focus

--color-azure-45

$checkbox-unchecked-bgColor

--color-grey-90

$checkbox-unchecked-bgColor--locked

--color-grey-86

$checkbox-unchecked-outline-color--focus

--color-azure-45

$checkbox-box-boxShadow

none

$checkbox-icon-boxShadow

none

$checkbox-box-boxShadow--hover

--embossed-2--grey-98

$checkbox-box-boxShadow--active

--bds-flatElement-brand--active

$checkbox-unchecked-box-boxShadow

--die-cut-05

$checkbox-unchecked-box-boxShadow--hover

--die-cut-1

Properties

export interface CheckboxProps extends FormLabelOptionalProps {
  modelValue: boolean;
  indeterminate?: boolean;
  // whether or not indeterminate state is clickable, default false
  clickableIndeterminate?: boolean;
  disabled?: boolean;
}

export type FormLabelCategory = "compact" | "default";
export type FormLabelPosition = "labelLeading" | "labelTrailing" | "labelAbove";

export interface FormLabelProps extends TooltipProps {
  label?: string;
  tooltip?: string;
  labelCategory: FormLabelCategory;
  labelPosition: FormLabelPosition,
  disabled?: boolean;
  required?: boolean;
  clickableLabel?: boolean;
}

Configurations

Checkbox
Company	Label Position	Label Category	Checked	Checked Disabled	Indeterminate	Indeterminate Disabled
	Trailing
		Default	Label	Label	Label	Label
		Compact	Label	Label	Label	Label
	Leading
		Default	Label	Label	Label	Label
		Compact	Label	Label	Label	Label

Checkbox Sizes
Size	Label Position	Label Category	Checked	Disabled
small	Trailing
		Default	Label	Label
		Compact	Label	Label
	Leading
		Default	Label	Label
		Compact	Label	Label
medium	Trailing
		Default	Label	Label
		Compact	Label	Label
	Leading
		Default	Label	Label
		Compact	Label	Label
big	Trailing
		Default	Label	Label
		Compact	Label	Label
	Leading
		Default	Label	Label
		Compact	Label	Label