Switch
#

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

Examples
#

Default
#

This is basic usage of switch component.

Open in GitHub

Color
#

You can customize color.

Open in GitHub

Label
#

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

left
right
right labeled by slot
left labeled by slot
Open in GitHub

Custom Label
#

You can label any state of switch.

Agree
Open in GitHub

Inner Label
#

You may put a label inside of a switch.

Open in GitHub

Size
#

Switches have 3 different sizes.

small
default
large
Open in GitHub

State
#

Switch can be in disabled or readonly state.

Open in GitHub

Loading
#

You can mark a pending state of switch.

Open in GitHub

Custom Values
#

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

Right
Open in GitHub

Indeterminate
#

true
true
Open in GitHub

Error
#

Switch has an error style.

error message
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
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

Events #

NameDescription

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

Slots #

NameDescription

default

Slot for label.

innerLabel

Slot for inner label.

Css Variables #

NameDefault 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