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.
/* * No installation step is necessary. * It gets installed by default by @quasar/app v2+. */
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 and dark
Apart from the standard sizes below, you can define your own through the
size property (last one is a custom size).
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
Toggle order v1.12+
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
t stands for state of true/checked while
f for state of false/unchecked).
Toggling order is:
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 -> …
Custom model values
You can also use QOptionGroup, which simplifies the usage when you have groups of checkboxes, like in example below.
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.
Native form submit v1.9+
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):