Checkbox

Rules

Basic Example

const rule = {
    type:"checkbox",
    title:"Label",
    field:"label",
    value:["1","2","3"],
    options:[
        {value:"1",label:"Easy to Use",disabled:true},
        {value:"2",label:"Convenient",disabled:false},
        {value:"3",label:"Practical",disabled:false},
        {value:"4",label:"Effective",disabled:false},
    ]
}

Props Configuration Examples

Button Style Checkbox

const rule = {
    type:"checkbox",
    title:"Product Tags",
    field:"tags",
    value:["1","2"],
    options:[
        {value:"1",label:"Hot Sale"},
        {value:"2",label:"New Product"},
        {value:"3",label:"Recommended"},
        {value:"4",label:"Limited Time"},
    ],
    props: {
        type: "button",
        size: "default",
    },
}

Limit Selection Count

const rule = {
    type:"checkbox",
    title:"Product Categories",
    field:"categories",
    value:["1"],
    options:[
        {value:"1",label:"Electronics"},
        {value:"2",label:"Clothing & Accessories"},
        {value:"3",label:"Home Goods"},
        {value:"4",label:"Food & Beverages"},
    ],
    props: {
        min: 1,
        max: 3,
    },
    validate:[
        { required: true, message: 'Select at least 1 category, up to 3', trigger: 'change' },
    ],
}

Disabled State

const rule = {
    type:"checkbox",
    title:"Permission Settings",
    field:"permissions",
    value:["1"],
    options:[
        {value:"1",label:"View",disabled:false},
        {value:"2",label:"Edit",disabled:true},
        {value:"3",label:"Delete",disabled:true},
    ],
    props: {
        disabled: false,
    },
}

Events Examples

Listen to Selection Changes

const rule = {
    type:"checkbox",
    title:"Product Tags",
    field:"tags",
    value:["1"],
    options:[
        {value:"1",label:"Hot Sale"},
        {value:"2",label:"New Product"},
        {value:"3",label:"Recommended"},
    ],
    on: {
        change: (value) => {
            console.log('Selection value changed:', value);
        },
    },
}

Linkage Update After Selection

const rule = [
    {
        type:"checkbox",
        title:"Product Tags",
        field:"tags",
        value:[],
        options:[
            {value:"1",label:"Hot Sale"},
            {value:"2",label:"New Product"},
            {value:"3",label:"Recommended"},
        ],
        inject: true,
        on: {
            change: ($inject, value) => {
                // Automatically set product status based on number of selected tags
                if (value.length >= 2) {
                    $inject.api.setValue('status', 'active');
                } else {
                    $inject.api.setValue('status', 'inactive');
                }
            },
        },
    },
    {
        type:"input",
        title:"Product Status",
        field:"status",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: Element_Checkbox

value :Array

Options

Field Name	Description	Field Type	Required	Default Value
value	Parameter value	String,Number	true	-
label	Field alias	String	true	-
disabled	Set to disabled state	Boolean	false	false

Props

Property Name	Description	Type	Default Value
size	Checkbox group size	enum	—
type	Checkbox type	'button'| 'checkbox'	-
disabled	Whether disabled	boolean	false
min	Minimum number of checkboxes that can be checked	number	—
max	Maximum number of checkboxes that can be checked	number	—
ariaLabel	Native aria-label attribute	string	—
textColor	Font color when button is active	string	#ffffff
fill	Border and background color when button is active	string	#409eff
tag	Checkbox group element tag	string	div
validateEvent	Whether to trigger form validation	boolean	true

Events

Event Name	Description	Type
change	Event triggered when bound value changes	Function