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.
Please also refer to the QOptionGroup on other possibilities for creating groups of Checkboxes.
Usage
Standard
With custom icons v2.5+
Label
Coloring
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.
Dense
Force dark mode
Sizes
Apart from the standard sizes below, you can define your own through the size property (last one is a custom size).
Indeterminate state
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.
Toggle order
By default, QCheckbox follows this chain when toggling: indeterminate -> checked -> unchecked. However, you can change this behavior through the toggle-order prop. This property determines the order of the states and can be tf (default) or ft (t stands for state of true/checked while f for state of false/unchecked).
Toggling order is:
- if
toggle-indeterminateis true, then: indet -> first state -> second state -> indet (and repeat) - otherwise (no toggle-indeterminate): indet -> first state -> second state -> first state -> second state -> …
Array model
Custom model values
With QOptionGroup
You can also use QOptionGroup, which simplifies the usage when you have groups of checkboxes, like in example below.
With QItem
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.
Disable
Native form submit
When dealing with a native form which has an action and a method (eg. when using Quasar with ASP.NET controllers), you need to specify the name property on QCheckbox, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):
Accessibility v2.25+
QCheckbox implements the WAI-ARIA checkbox pattern: it exposes role="checkbox" with a three-state aria-checked (true, false, or mixed for the indeterminate state). The label prop doubles as the accessible name (aria-label) — with a slot-only label, the name is derived from the rendered content — and a disabled checkbox exposes aria-disabled="true". The native <input type="checkbox"> you may notice in the DOM exists only for native form submission and <label> click forwarding; it is hidden from assistive technology.
The checkbox is a Tab stop (see the tabindex prop) and toggles on Enter or Space. Keyboard focus draws a visible focus ring, while mouse clicks deliberately do not, so pointer users are not distracted by it.