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

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

Vertical Arrangement

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: {
        direction: "vertical",
    }
}

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: {
        change: (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: {
            change: ($inject, value) => {
                // Set freight by delivery method
                const freightMap = {
                    "1": 10,
                    "2": 0,
                    "3": 5,
                };
                $inject.api.setValue('freight', freightMap[value] || 0);
            },
        },
    },
    {
        type:"input-number",
        title:"Freight",
        field:"freight",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: arco-design_Radio

value: String | Number

Options

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

Props

Parameter	Description	Type	Default
type	Type of radio group	'radio' | 'button'	'radio'
size	Size of radio group	'mini' | 'small' | 'medium' | 'large'	-
direction	Direction of radio group	'horizontal' | 'vertical'	'horizontal'
disabled	Whether disabled	boolean	false

Events

Event Name	Description	Parameters
change	Triggered when value changes	value: `(string