Anatomy
A checkbox can be accompanied with an optional label. A checkbox can be used as a single component (single option) or as part of a group (multiple options). More information can be found on the Usage page.
|
# |
Element type |
Element name |
Element description |
|---|---|---|---|
|
1 |
Input control |
Checkbox Input & Box |
Toggles between states and visually displays the current state with a checkmark or indicator. |
|
2 |
Label |
Checkbox Label |
Describes the checkbox option. |
States
The Checkbox is an Angular component that supports various states to enhance user interactions and feedback:
- Default
- Checked
- Unchecked
- Indeterminate
- Focused
Each state reflects the user’s selection or the component’s availability. See the Angular documentation for more detail.
Types
Default Checkbox
The Default Checkbox is a simple, standard checkbox used for basic selection tasks. It allows users to toggle between checked, unchecked, or indeterminate states. This type of checkbox can also be grouped for multi-select options in forms or lists.
Rich Checkbox
The Rich Checkbox is an enhanced version of the standard checkbox. It includes an icon inside the checkbox, a surrounding box, and a background color for additional visual emphasis. These checkboxes can also be grouped together, allowing users to select multiple related options within a cohesive set.