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.


// quasar.conf.js

return {
  framework: {
    // not needed if using auto-import feature:
    components: [


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


Add label with label prop. Useleft-label to put it on the left side.

With labels

Use keep-color prop to keep color in off and disabled state.

Keep color

Disable Toggle with disable prop.

Disabled state

Use icon prop to set icon. If you want different icons for each toggle state, use unchecked-icon and checked-icon props. Specifying checked-icon and unchecked-icon overrides icon property if you’ve also used it.


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

Custom model values

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

On a dark background


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

Usage with QOptionGroup

In a list

QToggle API