Switch
The ASwitch is a custom HTML5 input-type checkbox component that allows you to perform a toggle (on/off) action between checked and unchecked states. It supports different sizes, labels, label positions, and UI customization.
Import
js
import { ASwitch } from 'ayovue'
import 'ayovue/themes/default/switch.css'Example
on
off
on
off
Playground
onVariation
offVariation
onText
offText
size
<ASwitch />
Props
Switch component has the following props.
| Prop name | Type | Required | Default value | Details |
|---|---|---|---|---|
| modelValue | Boolean | No | false | ModelValue to bind using v-model which specifies whether the switch should be on or off. |
| onText | String | No | Text to show while the value is true. | |
| offText | String | No | Text to show while the value is false. | |
| onVariant | String | No | primary | Color variant of switch on state which has the following values: primary, secondary, success, info, warning , danger |
| offVariant | String | No | secondary | Color variant of switch off state has the following values: primary, secondary, success, info, warning , danger |
| size | Number | No | 16 | Defines the size of the switch. |
| disabled | Boolean | No | false | Make the switch disable. |
Events
Switch component supports all native events.