Switch

Switch is used for switching between two opposing states.

Basic usage

Sizes

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

TIP

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

Disabled

Loading

prevent switching

custom action icon 2.3.9

custom action slot 2.4.4

API

Attributes

NameDescriptionTypeDefault
model-value / v-modelbinding value, it should be equivalent to either active-value or inactive-value, by default it's boolean typeboolean / string / numberfalse
disabledwhether Switch is disabledbooleanfalse
loadingwhether Switch is in loading statebooleanfalse
sizesize of Switchenum''
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-action-icon 2.3.9component of the icon displayed in action when in on statestring / Component
inactive-action-icon 2.3.9component of the icon displayed in action when in off statestring / 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-color deprecatedbackground color when in on state ( deprecated, use CSS var --el-switch-on-color instead )string''
inactive-color deprecatedbackground color when in off state ( deprecated, use CSS var --el-switch-off-color instead )string''
border-color deprecatedborder 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 switchingboolean / Function
idid for inputstring
tabindextabindex for inputstring / number
label a11y deprecatedsame as aria-label in native inputstring
aria-label a11y 2.7.2same as aria-label in native inputstring

Events

NameDescriptionType
changetriggers when value changesFunction

Switch Slots

NameDescription
active-action 2.4.4customize active action
inactive-action 2.4.4customize inactive action

Exposes

MethodDescriptionType
focusmanual focus to the switch componentFunction

Source

ComponentDocs

Contributors