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
Attributes
| Name | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| model-value / v-model | binding value, it should be equivalent to either active-value or inactive-value, by default it's boolean type | boolean / string / number | — | — |
| disabled | whether Switch is disabled | boolean | — | false |
| loading | whether Switch is in loading state | boolean | — | false |
| size | size of Switch | string | large / default / small | default |
| width | width of Switch | number / string | — | — |
| inline-prompt | whether icon or text is displayed inside dot, only the first character will be rendered for text | boolean | — | false |
| active-icon | component of the icon displayed when in on state, overrides active-text | string | Component | — | — |
| inactive-icon | component of the icon displayed when in off state, overrides inactive-text | string | Component | — | — |
| active-text | text displayed when in on state | string | — | — |
| inactive-text | text displayed when in off state | string | — | — |
| active-value | switch value when in on state | boolean / string / number | — | true |
| inactive-value | switch value when in off state | boolean / string / number | — | false |
| active-color | background color when in on state ( deprecated, use CSS var --el-switch-on-color instead ) | string | — | — |
| inactive-color | background color when in off state ( deprecated, use CSS var --el-switch-off-color instead ) | string | — | — |
| border-color | border color of the switch ( deprecated, use CSS var --el-switch-border-color instead ) | string | — | — |
| name | input name of Switch | string | — | — |
| validate-event | whether to trigger form validation | boolean | — | true |
| before-change | before-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 | — | — |
Events
| Name | Description | Parameters |
|---|---|---|
| change | triggers when value changes | value after changing |
Methods
| Method | Description | Parameters |
|---|---|---|
| focus | focus the Switch component | — |
三咲智子
云游君
Jeremy
Aex
zz
LIUCHAO
Delyan Haralanov
kooriookami
啝裳
C.Y.Kun
Simon He
Xc
Carter Li
류한경
opengraphica
joson
Herrington Darkholme
Alan Wang
deepthan
Sleepy Five
on the field of hope
Weiqi Wu
zazzaz
Ther-su
Hades-li
qiang
0song