Checkbox

The QCheckbox component is another basic element for user input. You can use this to supply a way for the user to toggle an option.

TIP

Please also refer to the QOptionGroup on other possibilities for creating groups of Checkboxes.

Installation


// quasar.conf.js

return {
  framework: {
    components: [
      'QCheckbox'
    ]
  }
}

Usage

Standard



Label



In the second row in the example below, the property keep-color is being used to retain the passed in color when the checkbox is not in a toggled state.

Coloring



Dense



On a dark background



In the example below, as soon as you click on the first checkbox it starts toggling between true/false. The second checkbox, on the other hand toggles between the three states (indeterminate/true/false) with help from toggle-indeterminate. You can optionally set the property indeterminate-value, otherwise the indeterminate value will be considered null.

Indeterminate state



Array as model



Custom model values



TIP

You can also use QOptionGroup, which simplifies the usage when you have groups of checkboxes, like in example below.

Usage with QOptionGroup



In the example below, we are rendering a <label> tag (notice tag="label") so the QCheckbox will respond to clicks on QItems to change toggle state.

In a list



Disable



QCheckbox API