Basic
A q-toggle in its simplest form provides a toggle between 2 values.
Default
false
true
Colors
You can use the color prop to change the color of the toggle.
Default
Primary
Secondary
Info
Negative
Warning
Positive
Model as array
Multiple q-toggle can share the same v-model by using an array. [ "John" ]
Default
John
Mary
Jane
Peter
Paul
George
[]
Disabled
You can disable the toggle by using the disable prop.
Default
Primary
Secondary
Info
Negative
Warning
Positive
Label slot
Switch labels can be defined in default slot - that will allow to use HTML content.
Default
Switch labels can be defined in label slot - that will allow to use HTML content.
True and False Value
Use false-value and true-value prop to sets value for truthy and falsy state with label
Default
No
0
States
q-toggle can have different states such as default, disabled, and loading.
Default
false
false
false
Icons
q-toggle can have different icons with checked-icon and unchecked-icon props.
Default
Same Icon for each state
Different icon for each state