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.
Custom Label #
You can label any state of switch.
Inner Label #
You may put a label inside of a switch.
Size #
Switches have 3 different sizes.
State #
Switch can be in disabled or readonly state.
Loading #
You can mark a pending state of switch.
Custom Values #
You can set custom values for true and false state of the component.
Indeterminate #
Error #
Switch has an error style.
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
ariaLabel |
|
| |
arrayValue |
| - | |
color |
|
| |
disabled |
|
| |
error |
| - | |
errorCount |
|
| |
errorMessages |
| - | |
falseInnerLabel |
|
| |
falseLabel |
|
| |
falseValue |
|
| |
id |
|
| |
immediateValidation |
|
| |
indeterminate |
|
| |
indeterminateValue |
|
| |
label |
|
| |
leftLabel |
|
| |
loading |
|
| |
messages |
|
| |
modelValue |
|
| |
name |
|
| |
offColor |
|
| |
preset |
| - | |
readonly |
|
| |
rules |
|
| |
size |
|
| |
stateful |
|
| |
success |
|
| |
trueInnerLabel |
|
| |
trueLabel |
|
| |
trueValue |
|
|
Events #
Name | Description |
---|---|
blur | On blur.. The event argument is:
|
focus | On focus.. The event argument is:
|
input | On value change.. The event argument is:
|
update:error | |
update:errorMessages | |
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
Slots #
Name | Description |
---|---|
default | Slot for label. |
innerLabel | Slot for inner label. |
Css Variables #
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 |