Aqua Basis
The AqCheckboxButton component 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. |
info |
string |
'' |
Tooltip text. |
icon |
string |
'' |
Optional icon to display next to the label. |
tooltipWidth |
string |
'' |
Sets the width for the tooltip associated with the component. |
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. |
| orientation | horizontal | vertical | horizontal | Defines how the checkbox button is displayed.
Use horizontal to display the icon and label side by side, or vertical to stack them in a column. |
The Checkbox 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.
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-button&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>
In framework integrations, the Checkbox 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. ✨
