Skip to content
On this page

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 nameTypeRequiredDefault valueDetails
modelValueBooleanNofalseModelValue to bind using v-model which specifies whether the switch should be on or off.
onTextStringNoText to show while the value is true.
offTextStringNoText to show while the value is false.
onVariantStringNoprimaryColor variant of switch on state which has the following values:
primary, secondary, success, info, warning , danger
offVariantStringNosecondaryColor variant of switch off state has the following values:
primary, secondary, success, info, warning , danger
sizeNumberNo16Defines the size of the switch.
disabledBooleanNofalseMake the switch disable.

Events

Switch component supports all native events.

Released under the MIT License.