Radio

Rules

Basic Example

const rule = {
    type:"radio",
    title:"Free Shipping",
    field:"is_postage",
    value:"0",
    options:[
        {value:"0",label:"No Free Shipping",disabled:false},
        {value:"1",label:"Free Shipping",disabled:true},
    ],
}

Props Configuration Examples

Different Sizes

const rule = {
    type:"radio",
    title:"Product Status",
    field:"status",
    value:"1",
    options:[
        {value:"1",label:"On Sale"},
        {value:"2",label:"Off Sale"},
        {value:"3",label:"Pending Review"},
    ],
    props: {
        size: "small",
    }
}

Disabled Options

const rule = {
    type:"radio",
    title:"Payment Method",
    field:"payment",
    value:"1",
    options:[
        {value:"1",label:"Online Payment",disabled:false},
        {value:"2",label:"Cash on Delivery",disabled:true},
        {value:"3",label:"Balance Payment",disabled:false},
    ],
}

Events Examples

Handle Selection Changes

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

Linkage Update After Selection

const rule = [
    {
        type:"radio",
        title:"Delivery Method",
        field:"delivery",
        value:"1",
        options:[
            {value:"1",label:"Express Delivery"},
            {value:"2",label:"Store Pickup"},
            {value:"3",label:"Same City Delivery"},
        ],
        inject: true,
        on: {
            'update:value': ($inject, value) => {
                // Set shipping fee by delivery method
                const freightMap = {
                    "1": 10,
                    "2": 0,
                    "3": 5,
                };
                $inject.api.setValue('freight', freightMap[value] || 0);
            },
        },
    },
    {
        type:"input-number",
        title:"Shipping Fee",
        field:"freight",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: naive-ui_Radio

value :String | Number

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	Disabled state
name	string	undefined	Name attribute of radio elements inside option group
size	'small' | 'medium' | 'large'	'medium'	Size
on-update:value	(value: string) => void	undefined	Callback method triggered when value changes