Switch is used for switching between two opposing states.

Basic usage


Text description

You can add active-text and inactive-text attribute to show texts. use inline-prompt attribute to control text is displayed inside dot.

Display custom icons


Use the active-icon and inactive-icon attribute to add icon. You can pass either string for the component name (registered in advance) or the component itself which is a SVG Vue component. Element Plus has provided a set of icon that you can find at icon

Extended value types



prevent switching


NameDescriptionTypeAccepted 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
sizesize of Switchstringlarge / default / smalldefault
widthwidth of Switchnumber / string
inline-promptwhether icon or text is displayed inside dot, only the first character will be rendered for textbooleanfalse
active-iconcomponent of the icon displayed when in on state, overrides active-textstring | Component
inactive-iconcomponent of the icon displayed when in off state, overrides inactive-textstring | Component
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 state ( deprecated, use CSS var --el-switch-on-color instead )string
inactive-colorbackground color when in off state ( deprecated, use CSS var --el-switch-off-color instead )string
border-colorborder color of the switch ( deprecated, use CSS var --el-switch-border-color instead )string
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 switching() => Promise<boolean> | boolean


changetriggers when value changesvalue after changing


focusfocus the Switch component