Checkbox

A basic element that can be marked as selected and can be used in a list to provide multiple selection options.

Status

The status of the component

NOT CODED

Figma component

A link to the Figma library where the component lives.

Repository

A link to the repo where the component lives.

Usage Guidelines

Single Checkbox

Single checkbox

Use when a user needs to select any number independent options that are related to each other

Checkbox Group Form Fied

Use when a user needs to select any number independent options that are related to each other

Checkbox Nested Group Form Fied

Nested group is used when a checkbox group is needed and hierarchy needs to be shown. The parent checkbox serves as a control and indicator of the option items. Choosing the parent checkbox will toggle all of the option items on or off. If the parent checkbox shows an partial state, it means one or more option items are selected.

Checkbox vs Radio Button

Radio buttons let you choose only one option from a list of choices, ensuring exclusivity, while checkboxes allow multiple selections. If your situation requires only one choice from a group, opt for radio buttons instead of checkboxes.

❌ Don't

Don't use checkbox if only one item can be selected.

✅ Do

Do use radio buttons when only one item can be selected.

Checkbox vs Toggle

Checkboxes should be used when a selection needs to be made. The selection can be singular or multiple. A toggle is used when activation is involved—the activation should also be instantaneous. A checkbox should be used if the selection needs to be saved in an additional step.

❌ Don't

This single option does not involve anything being activated, which means a toggle should not be used.

✅ Do

Because this single option is a selection, a checkbox should be used.

❌ Don't

The list of options do not involve activation, which mean toggles should not be used.

✅ Do

This list presents several selection options, which should therefore use checkboxes.

Nested checkboxes are preferable to toggles when users must select multiple related options from a list. They effectively group similar items visually and occupy less space compared to toggles.

❌ Don't

When dealing with a list of multiple options, avoid using toggles. Opt for checkboxes instead. Checkboxes suggest a relationship between items and conserve visual space.

✅ Do

Checkboxes enable users to choose one or multiple options from a list. A nested checkbox facilitates effortless selection or deselection of all items.

Limit the Amount of Checkbox in the Group

This will help reduce the user’s cognitive load and anxiety. If you have more than six items, opt for a multi-select dropdown.

❌ Don't

Don't use checkbox group if you have more than 6 option items.

✅ Do

Do use multi-select dropdown if you need to save space or have more than 6 option items.

Forms

Forms are conjunctions of elements designed for collecting information from the user.

Radio Button

Radio buttons are UI elements that select one option from a list of mutually exclusive options.

Toggle

A digital on/off switch that always has a default value and prompts users to choose between two mutually exclusive options. Toggles should also provide immediate results.

Something looks broken on this site?

Report it to the Design System team here!