# 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.


# Examples

# Props

# Colors

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

# Flat

You can make switch render without elevation of thumb using flat property.

# Inset

You can make switch render in inset mode.

# Model as array

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

# Model as boolean

A single v-switch will have a boolean value as its value.

# States

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

# Slots

# Label

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

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:09/17/2021, 9:17:47 AM