This is BETA documentation for Vuetify 3, examples and information may be broken or outdated.
Components not listed in the sidebar are not available yet.
Vuetify 2 documentation can be found on vuetifyjs.com
Components not listed in the sidebar are not available yet.
Vuetify 2 documentation can be found on vuetifyjs.com
# 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.
# 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.
# Custom true/false values
The switch can use custom values for its v-model, using the props true-value and false-value.
# States
v-switch can have different states such as default, disabled, and loading.
# Slots
# Label
If you need to render a switch label with more complex markup than plain text, you can use the label slot.
Ready for more?
Continue your learning with related content selected by the Team or move between pages by using the navigation links below.