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:"Listed"},
        {value:"2",label:"Delisted"},
        {value:"3",label:"Pending Review"},
    ],
    props: {
        variant: "default-filled",
        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 freight based on 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: TDesign_Radio

value :String | Number