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

Button Style Radio

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"},
    ],
    props: {
        optionType: "button",
        buttonStyle: "solid",
    },
}

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: {
        optionType: "button",
        size: "small",
    },
}

Events Examples

Listen to 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: {
        change: (e) => {
            console.log('Selection value changed:', e.target.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: {
            change: ($inject, e) => {
                // Based on the delivery method, automatically set freight
                const freightMap = {
                    "1": 10,
                    "2": 0,
                    "3": 5,
                };
                $inject.api.setValue('freight', freightMap[e.target.value] || 0);
            },
        },
    },
    {
        type:"input-number",
        title:"Freight",
        field:"freight",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: Ant-design-vue_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

Parameter	Description	Type	Default
buttonStyle	Style of RadioButton, currently has two styles: outline and solid	outline | solid
disabled	Disable all child radio buttons	boolean	false
name	name attribute for all input[type="radio"] under RadioGroup	string	-
options	Set child elements in configuration form	string[] | number[] | Array<{ label: string value: string disabled?: boolean }>	-
optionType	Used to set Radio options type	default | button	3.0.0
size	Size, only effective for button style	large | default | default

Events

Event Name	Description	Callback Parameters
change	Callback function when option changes	Function(e:Event)