Toggle     

The Quasar Toggle 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 Option Group documentation on other possibilities for creating groups of Toggles.

Works well with QField for additional functionality such as a helper, error message placeholder and many others.

Installation

Edit /quasar.conf.js:

framework: {
  components: ['QToggle']
}

Basic Usage

<q-toggle v-model="checked" label="Toggle Label" />

<!-- With no label -->
<q-toggle v-model="checked" />

<!-- With a specific color -->
<q-toggle v-model="checked" color="teal-8" />

<!-- With icon -->
<q-toggle v-model="checked" icon="alarm" label="Toggle Label" />

<!-- Disabled state -->
<q-toggle v-model="checked" disable label="Toggle Label" />

Check “Vue Properties” for even more options.

Vue Properties

Supports v-model which you should bind to a Boolean or Array in your scope.

Vue PropertyTypeDescription
valObjectUsed to modify the v-model of the Toggle when using an Array as v-model.
true-valueAnyGets into “true” state when model has this value.
false-valueAnyGets into “false” state when model has this value.
labelStringThe text label for the Toggle.
left-labelBooleanSet to true, if the label should be placed to the left of the Toggle.
iconStringOptional icon to use. Overriden by checked-icon and unchecked-icon if the latter are used.
checked-iconStringThe icon to use, when the Toggle is checked.
unchecked-iconStringThe icon to use, when the Toggle is not checked.
colorStringColor from Quasar Color Palette.
keep-colorBooleanKeep color when not truthy too.
readonlyBooleanSet to true, to make the toggle read-only.
disableBooleanSet to true, to disable the toggle.
darkBooleanSet to true when background is dark.
no-focusBoolean(v0.17+) Disable accessibility for this component so that it can’t receive focus.

Vue Events

Vue EventDescription
@input(newVal)Triggered immediately on model value change.
@change(newVal)Triggered on lazy model value change.
@blurTriggered, when Toggle loses focus.
@focusTriggered, when Toggle gains focus.

Array as Model

If you have a number of toggles for a selection, use can also use an Array as the model object and the val prop for the inserted value into the Array.

<template>
  <div>
    <q-toggle v-model="selection" val="one" label="One" />
    <q-toggle v-model="selection" val="two" label="Two" />
    <q-toggle v-model="selection" val="three" label="Three" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      selection: ['two']
    }
  }
}
</script>

Ticking all toggles will make selection scope variable to be ['one', 'two', 'three']. Unticking all toggles will result in selection being an empty array [].

More Examples

There are a number of props, which are available to help quickly format a Toggle. An interesting feature of Toggle is the ripple effect that user sees when clicking/tapping on it to change its state.

Custom Model Values

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

<q-toggle
  v-model="customModel"
  color="secondary"
  label="Do you agree with the terms & conditions?"
  true-value="yes"
  false-value="no"
/>

Specific State Icons

For a more informational Toggle, you can also use the checked-icon and unchecked-icon props to display an inset icon in the toggle.

<q-toggle
  v-model="checked"
  unchecked-icon="visibility_off"
  checked-icon="visibility"
  label="Toggle Label"
/>

Specifying checked-icon and unchecked-icon overrides icon property if you’ve also used it.

Coloring

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

<q-toggle v-model="checked" color="orange" />

<q-toggle v-model="checked" color="teal" />

<q-toggle v-model="checked" color="dark" />

Label Position

Use the left-label prop, to move the label to the left of Toggle.

<q-toggle
  v-model="checked"
  left-label
  label="Checkbox Label"
/>

Usage Inside of a List

In the following example we use the right side of QItems to insert Toggle, but it works anywhere.

<q-list link>
  <!--
    Rendering a <label> tag (notice tag="label")
    so the whole QItem will respond to clicks to
    change Toggle state.
  -->
  <q-item tag="label">
    <q-item-main>
      <q-item-tile label>Events and reminders</q-item-tile>
    </q-item-main>
    <q-item-side right>
      <q-toggle v-model="checked" />
    </q-item-side>
  </q-item>
  <q-item tag="label" multiline>
    <q-item-main>
      <q-item-tile label>Events and reminders</q-item-tile>
      <q-item-tile sublabel>Lorem ipsum</q-item-tile>
    </q-item-main>
    <q-item-side right>
      <q-toggle v-model="checked" class="purple" />
    </q-item-side>
  </q-item>
  <q-item tag="label" multiline>
    <q-item-main>
      <q-item-tile label>Events and reminders</q-item-tile>
      <q-item-tile sublabel>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</q-item-tile>
    </q-item-main>
    <q-item-side right>
      <q-toggle v-model="checked" class="red" />
    </q-item-side>
  </q-item>
</q-list>
Checkbox Button Toggle
Last updated: Sat May 25 2019
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub