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
| Component | Description |
|---|---|
| v-switch | Primary Component |
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.
Edit this page onGitHub