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 |