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

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

Listen to 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 Other Fields

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) => {
                // Auto-set shipping fee based on 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: Element_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

Property Name	Description	Type	Default Value
size	Radio button or border button size	string	default
type	Radio type	'button'| 'radio'	-
disabled	Whether disabled	boolean	false
validate-event	Whether to trigger form validation on input	boolean	true
textColor	Text color when button-style Radio is active	string	#ffffff
fill	Fill color and border color when button-style Radio is active	string	#409eff
ariaLabel	Same as aria-label attribute in RadioGroup	string	—
name	Native name attribute	string	—
id	Native id attribute	string	—
label	Same as aria-label attribute in RadioGroup	string	—

Events

Event Name	Description	Type
change	Event triggered when bound value changes	Function