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

Limit Selection Count

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"},
    ],
    props: {
        min: 1,
        max: 3,
    }
}

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

Handle 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: {
        'update:value': (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: {
            'update:value': ($inject, value) => {
                // Set status based on selected tag count
                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: naive-ui_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

Name	Type	Default Value	Description
disabled	boolean	false	Whether option group is disabled
max	number	undefined	Maximum number of checkboxes that can be checked
min	number	undefined	Minimum number of checkboxes that can be checked
on-update:value	(value: string | number)	undefined	Callback when option group value changes