Switch
#

Switch component turns on or off the state of your custom option

Examples
#

Default
#

This is basic usage of switch component.

Color
#

You can customize color.

Label
#

Switch can be labeled on the left or on the right.

left

right

right labeled by slot

left labeled by slot

Custom Label
#

You can label any state of switch.

Agree

Inner Label
#

You may put a label inside of a switch.

Size
#

Switches have 3 different sizes.

small

default

large

State
#

Switch can be in disabled or readonly state.

States enabled

Loading
#

You can mark a pending state of switch.

Custom Values
#

You can set custom values for true and false state of the component.

Right

Indeterminate
#

true

Error
#

Switch has an error style.

error message

API
#

Name	Description	Types	Default
aria-label	The aria-label of the component	`String`	`"$t:switch"`
array-value	Takes the value of a switch in an array of switches	`String \| Boolean \| Object \| Number`	-
color	Color of switch	`String`	`"primary"`
disabled	Applies `disabled` style and removes all user interaction effects.	`Boolean`	`false`
error	Show component in error state.	`Boolean`	-
error-count	Number of error messages displayed.	`String \| Number`	`1`
error-messages	Error messages for the component.	`Array \| String`	-
false-inner-label	Inner label when unchecked	`String`	`null`
false-label	Label when unchecked	`String`	`null`
false-value	Value when unchecked	`any`	`false`
id	Applies `id` to internal input component. Useful for native forms.	`String`	`""`
immediate-validation	Sets the validation to be performed when the component is mounted	`Boolean`	`false`
indeterminate	Same as native `indeterminate` - a state in which it's impossible to say whether the item is toggled `on` or `off`	`Boolean`	`false`
indeterminate-value	Overrides a state value that is not set.	`any`	`null`
label	Switch label	`String`	`""`
left-label	Moves label to the left	`Boolean`	`false`
loading	Indicates that something is loading (spinner icon).	`Boolean`	`false`
messages	Description messages for the component.	`Array \| String`	`[]`
model-value	The value of the `v-model` bindings.	`Boolean \| Array \| String \| Object`	`false`
name	Applies `name` to internal input component. Useful for native forms.	`String`	`""`
off-color	The background color when switch is off	`String`	`"background-element"`
preset	Named preset combination of component props.	`String`	-
readonly	Makes switch read only	`Boolean`	`false`
rules	Validation rules .	`Array`	`[]`
size	Specify size for component. `"small"`, `"medium"`, `"large"` sizes are available	`String`	`"medium"`
stateful	Add possibility to work with component without setting `v-model`.	`Boolean`	`false`
success	Show component in success state.	`Boolean`	`false`
true-inner-label	Inner label when checked	`String`	`null`
true-label	Label when checked	`String`	`null`
true-value	Value when checked	`any`	`true`

Name	Description
blur	On blur.. The event argument is: `FocusEvent`
focus	On focus.. The event argument is: `FocusEvent`
input	On value change.. The event argument is: `any`
update-error
update-error-messages
update-model-value	The event is triggered when the component needs to change the model. Is also used by `v-model`

Name	Description
default	Slot for label.
innerLabel	Slot for inner label.

Name	Default Value
--va-switch-display	inline-block
--va-switch-checker-margin	auto
--va-switch-checker-transform	translateX(0.3rem)
--va-switch-checker-height	1.5rem
--va-switch-checker-width	1.5rem
--va-switch-checker-active-background-color	#ffffff
--va-switch-checker-background-color	var(--va-secondary)
--va-switch-checker-border-radius	50%
--va-switch-checker-box-shadow	0 0 0 var(--va-background-border)
--va-switch-checker-transition	all 0.2s ease
--va-switch-checker-wrapper-transform	translateX(0)
--va-switch-checker-wrapper-top	0
--va-switch-checker-wrapper-left	0
--va-switch-checker-wrapper-bottom	0
--va-switch-checker-wrapper-right	0
--va-switch-checker-wrapper-width	100%
--va-switch-checker-wrapper-height	100%
--va-switch-checker-wrapper-transition	all 0.2s ease
--va-switch-checker-wrapper-pointer-events	none
--va-switch-label-left-padding	0.3rem
--va-switch-label-right-padding	0.3rem
--va-switch-track-border-radius	1rem
--va-switch-track-height	100%
--va-switch-track-width	100%
--va-switch-track-background	var(--va-background-element)
--va-switch-track-box-shadow	inset 0 0 0 var(--va-shadow)
--va-switch-track-transition	background-color 0.2s ease
--va-switch-inner-cursor	pointer
--va-switch-inner-height	2rem
--va-switch-inner-width	auto
--va-switch-inner-min-width	4rem
--va-switch-inner-border-radius	1rem
--va-switch-sm-inner-height	1.5rem
--va-switch-sm-inner-width	auto
--va-switch-sm-inner-min-width	3rem
--va-switch-lg-inner-height	2.5rem
--va-switch-lg-inner-width	auto
--va-switch-lg-inner-min-width	5rem

Switch
#

Examples
#

Default
#

Color
#

Label
#

Custom Label
#

Inner Label
#

Size
#

State
#

Loading
#

Custom Values
#

Indeterminate
#

Error
#

API
#

Props #

Events #

Slots #

Css Variables #

Switch #

Examples #

Default #

Color #

Label #

Custom Label #

Inner Label #

Size #

State #

Loading #

Custom Values #

Indeterminate #

Error #

API #

Props #

Events #

Slots #

Css Variables #

Switch
#

Examples
#

Default
#

Color
#

Label
#

Custom Label
#

Inner Label
#

Size
#

State
#

Loading
#

Custom Values
#

Indeterminate
#

Error
#

API
#