The QToggle component is another basic element for user input. You can use this for turning settings, features or true/false inputs on and off.
Please also refer to the QOptionGroup on other possibilities for creating groups of Checkboxes.
Usage
Basic
Use the color prop to control the toggle’s color.
With labels
Keeping color
With icons
Custom model values
Instead of the default true / false values, you can use custom ones.
Indeterminate state
In the example below, as soon as you click on the first QToggle it starts toggling between true/false. The second QToggle, 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, QToggle 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
If you have a number of toggles for a selection, use can use an Array as the model for all of them and specify val prop on each toggle. If the toggle is ticked, its val will be inserted into the array and vice versa.
Dark design
Disable
Sizes
Apart from the standard sizes below, you can define your own through the size property (last one is a custom size).
With QOptionGroup
You can also use QOptionGroup, which simplifies the usage when you have groups of toggles, like in example below.
With QItem
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 QToggle, 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+
QToggle implements the WAI-ARIA switch pattern: it exposes role="switch" with aria-checked reflecting the model. The label prop provides the accessible name (aria-label), a disabled toggle exposes aria-disabled="true", and the keyboard/focus behavior is the same as QCheckbox: a Tab stop that toggles on Enter or Space.
Note that switch semantics only know on/off, so the indeterminate state is not announced — screen readers treat an indeterminate QToggle as off. When the mixed state matters to assistive technology users, prefer a QCheckbox, whose role does announce aria-checked="mixed".