Toggle

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.

TIP

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

Installation


// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QToggle'
    ]
  }
}

Usage

Basic

Use the color prop to control the toggle’s color.

Basic



With labels

With labels



Keeping color

Keep color



With icons

Icons



Custom model values

Instead of the default true/false values, you can use custom ones.

Custom model values



Indeterminate state
v1.8+

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.

Indeterminate 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.

Array model



Dark and disable

On a dark background



Disabled state



Sizes
v1.8+

Apart from the standard sizes below, you can define your own through the size property (last one is a custom size).

Standard sizes



With QOptionGroup

TIP

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

Usage with QOptionGroup



With QItem

With QItem



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 QToggle, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):

Native form



QToggle API