Switch

Rules

Basic Example

const rule = {
    type:"switch",
    title:"Is On Sale",
    field:"is_show",
    value:"1",
    props: {
        checkedValue: "1",
        uncheckedValue: "0",
    },
}

Props Configuration Examples

Custom Values

const rule = {
    type:"switch",
    title:"Product Status",
    field:"status",
    value:true,
    props: {
        checkedValue: true,
        uncheckedValue: false,
    }
}

Different Styles

const rule = {
    type:"switch",
    title:"Notification Switch",
    field:"notification",
    value:true,
    props: {
        type: "round",
    }
}

Loading State

const rule = {
    type:"switch",
    title:"Auto Save",
    field:"autoSave",
    value:false,
    props: {
        loading: false,
    }
}

Different Sizes

const rule = {
    type:"switch",
    title:"Switch",
    field:"switch",
    value:true,
    props: {
        size: "small",
    }
}

Events Examples

Handle Switch Changes

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

Linkage Update Other Fields

const rule = [
    {
        type:"switch",
        title:"Enable Discount",
        field:"enableDiscount",
        value:false,
        props: {
            checkedValue: true,
            uncheckedValue: false,
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // 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: arco-design_Switch

value: Number | String

Props

Parameter	Description	Type	Default	Version
disabled	Whether disabled	boolean	false
loading	Whether in loading state	boolean	false
type	Type of switch	'circle' | 'round' | 'line'	'circle'
size	Size of switch	'small' | 'medium'	'medium'
checked-value	Value when checked	string|number|boolean	true	2.12.0
unchecked-value	Value when unchecked	string|number|boolean	false	2.12.0
checked-color	Switch color when checked	string	-	2.12.0
unchecked-color	Switch color when unchecked	string	-	2.12.0

Events

Event Name	Description	Parameters
change	Triggered when value changes	value: union