Checkbox

Checkbox allows the users can easily indicate which options they want to select, and the selected options can be submitted as a group to perform a specific action or to record their preferences.

Component status

Design

Web component

Is documented

Status

Healthy

Figma component

Storybook

Principles

Use when

  1. you need to add multiple options or make a selection within an overflow menu or an input.
  2. user needs to make an explicit and irrevocable choice (e.g. accepting KVKK, legal terms while subscribing on sign-up/log-in processes)
  3. bulk editing needed on tables and structured list to edit record/items at once.

Don't use when

  1. if you only need to allow users to select a single option from a list. In this case, consider using a radio.
  2. if you need enable/disable setting or functionality, consider using the toggle switch.
  3. If you need checkbox as a group of actions that list on form pages, also consider using a checkbox group.

Structure

checkbox-structure
  1. Box (checkbox)
  2. Checkbox label
  3. Helper text (optional)

Properties

States

Default

The default state is when value is mostly checked, also the checkbox is unchecked.

Focused

On focused state (while on the tab key), pressing enter will switch between states check/unchecked).

Disabled

The disabled state, it either cannot be marked at the moment (depending on the action), or the user does not have the permission to check it, or the current action doesn't require its use.

Checked

When a checkbox is in the checked state, the element it marks either affects the current page or triggers other actions based on this selection.

Indeterminate

The indeterminate state is used for checkboxes in tables or structured lists when bulk editing, and when some, but not all, sub-items of a checkbox parent are selected.

Helper text (boolean)

If the checkbox label doesn't effectively convey the intended message, it can be detailed using helper text.

Behavior

A checkbox component can be utilized as singular user choices that can be turned on or off on form/input pages.

Also, each checkbox in a list/overflow menu is independent of the others, meaning selecting or deselecting one checkbox does not impact the selection status of the others.

Transition

When the checkbox is checked (pressed), only the box area will smoothly transition with a duration of 200ms ease .

Figma source