Switches

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.

Usage

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

API

Examples

Props

Colors

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

v-switch/prop-colors.vue

Inset

You can make switch render in inset mode.

v-switch/prop-inset.vue

Model as array

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

v-switch/prop-model-as-array.vue

Custom true/false values

The switch can use custom values for its v-model, using the props true-value and false-value.

v-switch/prop-custom-values.vue

States

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

v-switch/prop-states.vue

Slots

Label

If you need to render a switch label with more complex markup than plain text, you can use the label slot.

v-switch/slot-label.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.