Checkbox component

A checkbox allows users to select multiple options from a set.

List with Accordion menu and checkboxes

Structure

A checkbox is a small square that can be checked or unchecked.

It can have a label placed on the left (inline) or on top (vertical).

For a required checkbox, a red asterisk should be added next to the label.

For a read-only checkbox, a lock icon should be added next to the label.

Behavior

Clicking on a checkbox selects the corresponding item.

A checkmark appears to confirm the selection.

Style

Color

Since checkboxes are clickable elements, they have multiple states.

Each state is associated with a different color, providing visual feedback to users.

Default checkbox
Checkbox with error
Checkbox with warning

Shape

Checkboxes are shown as a small square with a corner radius of 25% and a 1px outline.