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
ariaLabel

String

"$t:switch"

arrayValue

String | Boolean | Object | Number

-

color

String

"primary"

disabled

Boolean

false

error

Boolean

-

errorCount

String | Number

1

errorMessages

Array | String

-

falseInnerLabel

String

null

falseLabel

String

null

falseValue

any

false

id

String

""

immediateValidation

Boolean

false

indeterminate

Boolean

false

indeterminateValue

any

null

label

String

""

leftLabel

Boolean

false

loading

Boolean

false

messages

Array | String

[]

modelValue

Number | Boolean | Array | String | Object

false

name

String

""

offColor

String

"background-element"

preset

String

-

readonly

Boolean

false

rules

Array

[]

size

String

"medium"

stateful

Boolean

false

success

Boolean

false

trueInnerLabel

String

null

trueLabel

String

null

trueValue

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:errorMessages

update:modelValue

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