Design
Component status
Web component
Is documented
Principles
Use when
- you need to add multiple options or make a selection within an overflow menu or an input.
- user needs to make an explicit and irrevocable choice (e.g. accepting KVKK, legal terms while subscribing on sign-up/log-in processes)
- bulk editing needed on tables and structured list to edit record/items at once.
Don't use when
- if you only need to allow users to select a single option from a list. In this case, consider using a radio.
- if you need enable/disable setting or functionality, consider using the toggle switch.
- If you need checkbox as a group of actions that list on form pages, also consider using a checkbox group.
Structure

- Box (checkbox)
- Checkbox label
- 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 .