Switch
Switch is used for switching between two opposing states.
Basic usage Bind v-model to a Boolean typed variable. The --el-switch-on-color and --el-switch-off-color CSS variables decides the background color in two states.
export function SwitchBasic() { const [value1, setValue1] = useState(true); const [value2, setValue2] = useState(true); return ( <> <ElSwitch checked={value1} onCheckedChange={setValue1} /> <ElSwitch checked={value2} onCheckedChange={setValue2} style={{ ...ml2, ...greenRed }} /> </> ); } Sizes
export function SwitchSizes() { const [value, setValue] = useState(true); return ( <> <ElSwitch checked={value} onCheckedChange={setValue} size="large" activeText="Open" inactiveText="Close" /> <br /> <ElSwitch checked={value} onCheckedChange={setValue} activeText="Open" inactiveText="Close" /> <br /> <ElSwitch checked={value} onCheckedChange={setValue} size="small" activeText="Open" inactiveText="Close" /> </> ); } 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.
You can add active-text and inactive-text attribute to show texts.
export function SwitchText() { const [value1, setValue1] = useState(true); const [value2, setValue2] = useState(true); const [value3, setValue3] = useState(true); const [value4, setValue4] = useState(true); const [value5, setValue5] = useState(true); const [value6, setValue6] = useState(true); return ( <> <ElSwitch checked={value1} onCheckedChange={setValue1} style={mb2} activeText="Pay by month" inactiveText="Pay by year" /> <br /> <ElSwitch checked={value2} onCheckedChange={setValue2} style={{ ...mb2, ...greenRed }} activeText="Pay by month" inactiveText="Pay by year" /> <br /> <ElSwitch checked={value3} onCheckedChange={setValue3} inlinePrompt activeText="是" inactiveText="否" /> <ElSwitch checked={value4} onCheckedChange={setValue4} style={{ ...ml2, ...greenRed }} inlinePrompt activeText="Y" inactiveText="N" /> <ElSwitch checked={value6} onCheckedChange={setValue6} style={ml2} width="60" inlinePrompt activeText="超出省略" inactiveText="超出省略" /> <ElSwitch checked={value5} onCheckedChange={setValue5} style={{ ...ml2, ...greenRed }} inlinePrompt activeText="完整展示多个内容" inactiveText="多个内容" /> </> ); } 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
You can add active-icon and inactive-icon attribute to show icons. use inline-prompt attribute to control icon is displayed inside dot.
export function SwitchIcons() { const [value1, setValue1] = useState(true); const [value2, setValue2] = useState(true); return ( <> <ElSwitch checked={value1} onCheckedChange={setValue1} activeIcon={<Check />} inactiveIcon={<Close />} /> <br /> <ElSwitch checked={value2} onCheckedChange={setValue2} style={{ marginTop: 8, marginLeft: 24 }} inlinePrompt activeIcon={<Check />} inactiveIcon={<Close />} /> </> ); } Extended value types You can set active-value and inactive-value attributes. They both receive a Boolean, String or Number typed value.
export function SwitchCustomValue() { const [value, setValue] = useState<string>("100"); return ( <ElTooltip content={`Switch value: ${value}`} placement="top"> <span> <ElSwitch value={value} onChange={(next) => setValue(String(next))} activeValue="100" inactiveValue="0" style={greenRed} /> </span> </ElTooltip> ); } Disabled Adding the disabled attribute disables Switch.
export function SwitchDisabled() { const [value1, setValue1] = useState(true); const [value2, setValue2] = useState(true); return ( <> <ElSwitch checked={value1} onCheckedChange={setValue1} disabled /> <ElSwitch checked={value2} onCheckedChange={setValue2} style={ml2} /> </> ); } Loading Setting the loading attribute to true indicates a loading state on the Switch.
export function SwitchLoading() { const [value1, setValue1] = useState(true); const [value2, setValue2] = useState(false); return ( <> <ElSwitch checked={value1} onCheckedChange={setValue1} loading /> <ElSwitch checked={value2} onCheckedChange={setValue2} style={ml2} loading /> </> ); } Prevent switching set the before-change property, If false is returned or a Promise is returned and then is rejected, will stop switching.
export function SwitchBeforeChange() { const [value1, setValue1] = useState(false); const [value2, setValue2] = useState(false); const [loading1, setLoading1] = useState(false); const [loading2, setLoading2] = useState(false); const beforeChange1 = (): Promise<boolean> => { setLoading1(true); return new Promise((resolve) => { setTimeout(() => { setLoading1(false); message.success("Switch success"); resolve(true); }, 1000); }); }; const beforeChange2 = (): Promise<boolean> => { setLoading2(true); return new Promise((_, reject) => { setTimeout(() => { setLoading2(false); message.error("Switch failed"); reject(new Error("Error")); }, 1000); }); }; return ( <> <ElSwitch checked={value1} onCheckedChange={setValue1} loading={loading1} beforeChange={beforeChange1} /> <ElSwitch checked={value2} onCheckedChange={setValue2} style={ml2} loading={loading2} beforeChange={beforeChange2} /> </> ); } Custom action icon 2.3.9 You can add active-action-icon and inactive-action-icon attribute to show icons.
export function SwitchCustomActionIcon() { const [value1, setValue1] = useState(true); return ( <ElSwitch checked={value1} onCheckedChange={setValue1} activeActionIcon={<View />} inactiveActionIcon={<Hide />} /> ); } Custom action slot 2.4.4 You can use active-action and inactive-action slot to customize action.
export function SwitchCustomActionSlot() { const [value1, setValue1] = useState(true); return ( <ElSwitch checked={value1} onCheckedChange={setValue1} activeActionContent={<span className="custom-active-action">T</span>} inactiveActionContent={<span className="custom-inactive-action">F</span>} /> ); } API
Attributes
Name Description Type Default model-value / v-model binding value, it should be equivalent to either active-value or inactive-value, by default it's boolean type booleanstringnumberfalse disabled whether Switch is disabled booleanfalse loading whether Switch is in loading state booleanfalse size size of Switch enum'' width width of Switch numberstring'' inline-prompt whether icon or text is displayed inside dot, only the first character will be rendered for text booleanfalse active-icon component of the icon displayed when in on state, overrides active-text stringComponent— inactive-icon component of the icon displayed when in off state, overrides inactive-text stringComponent— active-action-icon 2.3.9 component of the icon displayed in action when in on state stringComponent— inactive-action-icon 2.3.9 component of the icon displayed in action when in off state stringComponent— 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 booleanstringnumbertrue inactive-value switch value when in off state booleanstringnumberfalse name input name of Switch string'' validate-event whether to trigger form validation booleantrue 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 Function— id id for input string— tabindex tabindex for input stringnumber— aria-label a11y 2.7.2 same as aria-label in native input string— active-color deprecated background color when in on state ( use CSS var --el-switch-on-color instead ) string'' inactive-color deprecated background color when in off state ( use CSS var --el-switch-off-color instead ) string'' border-color deprecated border color of the switch ( use CSS var --el-switch-border-color instead ) string'' label a11y deprecated same as aria-label in native input string—
Events
Name Description Type change triggers when value changes Function
Switch Slots
Name Description active-action 2.4.4 customize active action inactive-action 2.4.4 customize inactive action active 2.13.0 customize active content inactive 2.13.0 customize inactive content
Exposes
Method Description Type focus manual focus to the switch component Function
