Aqua Basis
The AqCheckboxCard components are used for multiple choices, not for mutually exclusive choices. Each checkbox button works independently from other checkboxes button in the list, therefore checking an additional box does not affect any other selections.
As a best practice, it should only be used within the AqCheckboxGroup to ensure consistent behavior and accessibility
| Prop / Attr | Type | Default | Description |
|---|---|---|---|
label |
string |
'' |
Main label text displayed next to the checkbox. |
icon |
string |
'' |
Optional icon to display next to the label. |
subLabel |
string |
'' |
Adds a secondary label displayed inside the card. |
Typically used to provide extra context or clarification. |
| indeterminate | boolean | false | Renders the checkbox in an indeterminate state. |
| isChecked | boolean | false | Sets the checkbox to a checked state. |
| isDisabled | boolean | false | Disables interaction with the checkbox. |
| idCheckbox | string | ''
If no value is passed, it’ll generate a random alpha numeric combination. | Unique identifier assigned to the checkbox input element.
Useful for linking the checkbox with its corresponding label or for testing purposes. |
| valueCheckbox | string | '' | The value attribute assigned to the checkbox.
This is the value that will be submitted with the form when the checkbox is checked. |
| name | string | '' | Name attribute of the checkbox input element.
Used to group checkboxes in a form so their values can be submitted together. |
You can interact with the component and experiment with its attributes and properties directly in this playground.
In the Code tab, the generated code snippet is available.
In addition to the interactive examples in this documentation, you can explore the full playground with all supported options and advanced configurations at the following link:
https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-forms-aqcheckboxgroup--default&args=type:checkbox-card&nav=0
<aside> ⚠️
Important: The code shown is in Web Component format. If you are using a specific framework (Vue, React, Angular), you must adapt it to the framework’s conventions before using it.
</aside>
The AqCheckboxCard component supports two-way binding through framework wrappers. For more predictable and scalable usage, it is recommended to rely on AqCheckboxGroup, which provides a consistent API for handling selections and state.
In framework integrations, the AqCheckboxCard component should be used within the context of AqCheckboxGroup as a best practice. This ensures consistent behavior and alignment with form patterns.
For implementation details, please refer to the AqCheckboxGroup documentation page. Remember to review the available props when configuring options inside the group.
On this page
✨ Design together. Build together. Speak the same language. ✨
