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