Radio

Rule

Basic Example

const rule = {
    type: 'radio',
    title: 'Radio Button',
    field: 'radio',
    value: '1',
    props: {
        options: [
            {
                text: 'Radio 1',
                value: '1',
            },
            {
                text: 'Radio 2',
                value: '2',
            },
        ]
    }
}

Props Configuration Examples

Horizontal Layout

const rule = {
    type: 'radio',
    title: 'Delivery Method',
    field: 'delivery',
    value: '1',
    props: {
        options: [
            { text: 'Express Delivery', value: '1' },
            { text: 'Store Pickup', value: '2' },
            { text: 'Same City Delivery', value: '3' },
        ],
        direction: 'horizontal',
    }
}

Custom Style

const rule = {
    type: 'radio',
    title: 'Product Status',
    field: 'status',
    value: '1',
    props: {
        options: [
            { text: 'Listed', value: '1' },
            { text: 'Delisted', value: '2' },
        ],
        shape: 'square',
        checkedColor: '#ee0a24',
        iconSize: '24px',
    }
}

Events Examples

Handle Selection Changes

const rule = {
    type: 'radio',
    title: 'Delivery Method',
    field: 'delivery',
    value: '1',
    props: {
        options: [
            { text: 'Express Delivery', value: '1' },
            { text: 'Store Pickup', value: '2' },
            { text: 'Same City Delivery', value: '3' },
        ],
    },
    on: {
        change: (name) => {
            console.log('Selection changed:', name);
        },
    },
}

Linkage Update After Selection

const rule = [
    {
        type: 'radio',
        title: 'Delivery Method',
        field: 'delivery',
        value: '1',
        props: {
            options: [
                { text: 'Express Delivery', value: '1' },
                { text: 'Store Pickup', value: '2' },
                { text: 'Same City Delivery', value: '3' },
            ],
        },
        inject: true,
        on: {
            change: ($inject, name) => {
                // Set freight by delivery method
                const freightMap = {
                    '1': 10,
                    '2': 0,
                    '3': 5,
                };
                $inject.api.setValue('freight', freightMap[name] || 0);
            },
        },
    },
    {
        type: 'stepper',
        title: 'Freight',
        field: 'freight',
        props: {
            disabled: true,
        },
    },
]

Complete configuration items:Vant_Radio

value :String | Number

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 radio buttons	boolean	false
direction	Layout direction, optional value is horizontal	string	vertical
icon-size	Icon size for all radio buttons, default unit is px	number | string	20px
checked-color	Selected state color for all radio buttons	string	#1989fa
shape	Shape, optional values are square dot	string	round

Events

Event Name	Description	Callback Parameters
change	Event triggered when bound value changes	name: string