Checkbox

Rule

Basic Example

const rule = {
    type: 'checkbox',
    title: 'Checkbox',
    field: 'checkbox',
    value: ['1'],
    props: {
        options: [
            {
                text: 'Checkbox 1',
                value: '1',
            },
            {
                text: 'Checkbox 2',
                value: '2',
            },
        ]
    }
}

Props Configuration Examples

Limit Selection Count

const rule = {
    type: 'checkbox',
    title: 'Product Tags',
    field: 'tags',
    value: ['1'],
    props: {
        options: [
            { text: 'Hot Sale', value: '1' },
            { text: 'New Product', value: '2' },
            { text: 'Recommended', value: '3' },
        ],
        max: 3,
    }
}

Horizontal Layout

const rule = {
    type: 'checkbox',
    title: 'Product Tags',
    field: 'tags',
    value: [],
    props: {
        options: [
            { text: 'Hot Sale', value: '1' },
            { text: 'New Product', value: '2' },
            { text: 'Recommended', value: '3' },
        ],
        direction: 'horizontal',
    }
}

Custom Style

const rule = {
    type: 'checkbox',
    title: 'Product Tags',
    field: 'tags',
    value: [],
    props: {
        options: [
            { text: 'Hot Sale', value: '1' },
            { text: 'New Product', value: '2' },
        ],
        shape: 'square',
        checkedColor: '#ee0a24',
        iconSize: '24px',
    }
}

Events Examples

Listen to Selection Changes

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

Linkage Update After Selection

const rule = [
    {
        type: 'checkbox',
        title: 'Product Tags',
        field: 'tags',
        value: [],
        props: {
            options: [
                { text: 'Hot Sale', value: '1' },
                { text: 'New Product', value: '2' },
                { text: 'Recommended', value: '3' },
            ],
        },
        inject: true,
        on: {
            change: ($inject, names) => {
                // Auto-set product status based on number of selected tags
                if (names.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:Vant_Checkbox

value :Array

Options

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

Props

Parameter	Description	Type	Default Value
disabled	Whether to disable all checkboxes	boolean	false
max	Maximum selectable count, 0 means unlimited	number | string	0
direction	Layout direction, optional value is horizontal	string	vertical
icon-size	Icon size for all checkboxes, default unit is px	number | string	20px
checked-color	Selected state color for all checkboxes	string	#1989fa
shape	Shape, optional value is square	string	round

Events

Event Name	Description	Callback Parameters
change	Event triggered when bound value changes	names: any[]