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.
