Switch is used for switching between two opposing states.

Basic usage

Text description

Extended value types



prevent switching


AttributeDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding value, it should be equivalent to either active-value or inactive-value, by default it's boolean typeboolean / string / number
disabledwhether Switch is disabledbooleanfalse
loadingwhether Switch is in loading statebooleanfalse
widthwidth of Switchnumber40
active-icon-classclass name of the icon displayed when in on state, overrides active-textstring
inactive-icon-classclass name of the icon displayed when in off state, overrides inactive-textstring
active-texttext displayed when in on statestring
inactive-texttext displayed when in off statestring
active-valueswitch value when in on stateboolean / string / numbertrue
inactive-valueswitch value when in off stateboolean / string / numberfalse
active-colorbackground color when in on statestring#409EFF
inactive-colorbackground color when in off statestring#C0CCDA
border-colorborder color of the switchstring
nameinput name of Switchstring
validate-eventwhether to trigger form validationbooleantrue
before-changebefore-change hook before the switch state changes. If false is returned or a Promise is returned and then is rejected, will stop switchingfunction


Event NameDescriptionParameters
changetriggers when value changesvalue after changing


focusfocus the Switch component