Switch

Simple and functional.

State

To implement a switch element in the application, we add the component vs-switch.

Color

You can choose the default Switch. You are able to use the Main Colors or RGB and HEX colors.

WARNING

Supported colors are RGB and HEX

Text

You can add a descriptive text with the slot on or off. You can also join the text with the icons.

Icons

We can add a representative icon inside our switch with the property vs-icon.

If you only need to add the icon in one of the states you can do it with the property vs-icon-on or vs-icon-off

TIP

Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page. Other icon libraries can be used by providing the class for the respective pack in the icon-pack property. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.

Array Value

For saving the values in an array, you could simply pass it as a value.

WARNING

For using an array as a value, we need to use the vs-value property inside the switch component. That is the value that will be added to the array.

  • [ "luis" ]

API #

Name Type Parameters Description default
v-model boolean || Array true || false || [] Link values.
vs-value String Value if different from a boolean.
color String Default Colors | HEX | RGB Type of element or color. primary
vs-icon String Material Icons Icon within the element.
vs-icon-on String Material Icons Icon that appears when the item is in active state.
vs-icon-off String Material Icons Icon that appears in the inactive state.
icon-pack String Icon Pack Class Name Icon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. material-icons