Switch

Rules

Basic Example

const rule = {
    type:"switch",
    title:"On Sale",
    field:"is_show",
    value:"1",
    props: {
        activeValue:"1",
        inactiveValue:"0",
    },
}

Props Configuration Examples

With Text Description

const rule = {
    type:"switch",
    title:"Product Status",
    field:"status",
    value:true,
    props: {
        activeText: "On Sale",
        inactiveText: "Off Sale",
        activeValue: true,
        inactiveValue: false,
    },
}

With Icon

const rule = {
    type:"switch",
    title:"Enabled",
    field:"enabled",
    value:true,
    props: {
        activeIcon: "Check",
        inactiveIcon: "Close",
    },
}

Loading State

const rule = {
    type:"switch",
    title:"Auto Save",
    field:"autoSave",
    value:false,
    props: {
        loading: false,
        activeText: "On",
        inactiveText: "Off",
    },
    on: {
        change: (value) => {
            // Show loading state when toggling
            // Need to control loading state through other means
        },
    },
}

Different Sizes

const rule = {
    type:"switch",
    title:"Notification Switch",
    field:"notification",
    value:true,
    props: {
        size: "large",
        activeText: "On",
        inactiveText: "Off",
    },
}

Custom Width

const rule = {
    type:"switch",
    title:"Auto Renew",
    field:"autoRenew",
    value:false,
    props: {
        width: 60,
        activeText: "Yes",
        inactiveText: "No",
    },
}

Events Examples

Listen to Switch Changes

const rule = {
    type:"switch",
    title:"On Sale",
    field:"is_show",
    value:"1",
    props: {
        activeValue:"1",
        inactiveValue:"0",
        activeText: "On Sale",
        inactiveText: "Off Sale",
    },
    on: {
        change: (value) => {
            console.log('Switch state changed:', value);
        },
    },
}

Confirm Before Toggle

const rule = {
    type:"switch",
    title:"Delete Product",
    field:"allowDelete",
    value:false,
    props: {
        activeText: "Allow",
        inactiveText: "Forbid",
        beforeChange: () => {
            // Return Promise, can be used for async confirmation
            return new Promise((resolve) => {
                if (confirm('Are you sure you want to modify delete permission?')) {
                    resolve(true);
                } else {
                    resolve(false);
                }
            });
        },
    },
}

Linkage Update Other Fields

const rule = [
    {
        type:"switch",
        title:"Enable Discount",
        field:"enableDiscount",
        value:false,
        props: {
            activeText: "Enable",
            inactiveText: "Disable",
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // When discount is enabled, automatically set default discount rate
                if (value) {
                    $inject.api.setValue('discount', 0.9);
                } else {
                    $inject.api.setValue('discount', 1);
                }
            },
        },
    },
    {
        type:"input-number",
        title:"Discount Rate",
        field:"discount",
        props: {
            min: 0,
            max: 1,
            step: 0.1,
            precision: 2,
            disabled: false,
        },
    },
]

Complete configuration items: Element_Switch

value :Number | String

Props

Property Name	Description	Type	Default
disabled	Whether disabled	boolean	false
loading	Whether to show loading	boolean	false
size	Switch size	enum	''
width	Switch width	number / string	''
inlinePrompt	Whether icon or text is displayed inside the dot, only the first character of text will be rendered	boolean	false
activeIcon	Icon displayed when switch state is on, setting this will ignore active-text	string / Component	—
inactiveIcon	Icon displayed when switch state is off, setting this will ignore inactive-text	string / Component	—
activeActionIcon	Icon component displayed in on state	string / Component	—
inactiveActionIcon	Icon component displayed in off state	string / Component	—
activeText	Text description when switch is on	string	''
inactiveText	Text description when switch state is off	string	''
activeValue	Value when switch state is on	boolean / string / number	true
inactiveValue	Value when switch state is off	boolean / string / number	false
name	Corresponding name attribute of switch	string	''
validateEvent	Whether to trigger form validation	boolean	true
beforeChange	Hook before switch state changes, return false or return Promise and be rejected to stop toggle	Function	—
id	Input id	string	—
tabindex	Input tabindex	string / number	—
ariaLabel	Equivalent to native input aria-label attribute	string	—
activeColor	Background color when in on state (recommended to use CSS var --el-switch-on-color)	string	''
inactiveColor	Background color in off state (recommended to use CSS var --el-switch-off-color)	string	''
borderColor	Border color of switch (recommended to use CSS var --el-switch-border-color)	string	''
label	Equivalent to native input aria-label attribute	string	—

Events

Event Name	Description	Type
change	Callback function when switch state changes	Function

Slots

Name	Description
active-action	Custom active behavior
inactive-action	Custom inactive behavior