Aqua DS - Component Library

Quick Start

Framework Implementation

WebComponents

Vue 3

React

Angular

Components

Data Types

Directives

Style Customization

Theming

Custom Styles

Icons

FAQ

Aqua Basis

Aqua Composition

The AqCheckbox component supports common form control states such as checked, disabled, and indeterminate. It also provides additional features like icons, tooltips, and change event handling.

<aq-checkbox
  id="aq-checkbox-6bs83g"
  label="This is a checkbox 1"
  is-checked>
</aq-checkbox>

image.png

Props and Attributes

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.
indeterminate boolean false Renders the checkbox in an indeterminate state.
isRequired boolean false Displays an asterisk (*) indicating that the field is required.
isDisabled boolean false Disables interaction with the checkbox.
isChecked boolean false Sets the checkbox to a checked state.
idCheckbox string '' 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. | | tooltipWidth | string | '' | Sets the width for the tooltip associated with the component label info icon. |

PlayGround

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:

👉 Open full playground

https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-forms-aqcheckbox--default&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>

Events

Event Description React Angular Vue Web Components
change Triggered when the checkbox state changes. onChange={handleChange} (change)="handleChange($event)" @change="handleChange" addEventListener('change', handler)

Event Types

Event React Angular Vue
change (e:React.ChangeEvent<HTMLAqCheckboxElement> & {nativeEvent: CustomEvent<{value:string}>}) (e:Event) (e:CustomEvent)

Variants

The Checkbox component includes additional visual variants that, as a best practice, should only be used within the AqCheckboxGroup to ensure consistent behavior and accessibility.

Binding Support by Framework

Framework Two-Way Binding Support Example Notes
Vue 3 âś… v-model v-model="selectedValue" Works with ref binding and emits updates
Angular ✅ [(ngModel)] [(ngModel)]="modelCheckbox” Requires FormsModule or standalone setup
React ⚠️ Manual
Web Components ⚠️ Manual

In Frameworks

Web Components

<aq-checkbox
	id="chk"
	value-checkbox="checkbox-6"
	info="This isn't a required checkbox"
	label="Checkbox"
  icon="aq-icon-settings"
  value="true"
  is-disabled>
</aq-checkbox>

<script>
  const checkbox = document.getElementById('chk');
  
  checkbox.addEventListener('change', (event) => {
    console.log('Checkbox change ', event);
  });
</script>

Vue