Switch

The v-switch component provides users the ability to choose between two distinct values. These are very similar to a toggle, or on/off switch, though aesthetically different than a checkbox.

Basic

A v-switch in its simplest form provides a toggle between 2 values.

Inset

To change the default inset switch, simply modify the inset prop to a false value.

Colors

Switches can be colored by using any of the builtin colors and contextual names using the color prop.

Model as array

Multiple v-switch's can share the same v-model by using an array.

Label slot

Switch labels can be defined in label slot - that will allow to use HTML content.

Use false-value and true-value prop to sets value for truthy and falsy state

States

v-switch can have different states such as default, disabled, and loading.