Checkboxes provide a binary selection mechanism where users can either check the box to indicate they want a particular option or leave it unchecked to indicate they do not want that option.
They are commonly used in forms, settings panels, and various other interfaces where users need to make multiple selections or provide input from a predefined set of options.
Anatomy
The anatomy of a checkbox rarely differs. This is the the most common version of a checkbox.
- Box Fill Color Checked. Always using color-brand-400 when checked.
- Checkmark. Always using icon-usp.
- Label Checked. Label turn font-weight-semibold when in checked state.
- Box Inner Shadow. The unchecked state uses shadow-ui-inward.
- Box Fill Color Unchecked. Fill color-base-100 indicating that the checkbox us unchecked.
- Label Unchecked. Label turn font-weight-regular when in checked state.