DevExtreme Vue - Overview

The RadioGroup is a widget that contains a set of radio buttons and allows an end user to make a single selection from the set.

View Demo

The following code adds a simple RadioGroup to your page. Here, the value option specifies the initially selected radio button.

HTML
JavaScript
<div id="radioGroupContainer"></div>
$(function() {
    $("#radioGroupContainer").dxRadioGroup({
        dataSource: ["Low", "Normal", "Urgent", "High"],
        value: "Low"
    });
});

If your data is an array of objects, bind it to the RadioGroup using the displayExpr and valueExpr options. displayExpr specifies which data source field provides texts for buttons; valueExpr specifies which data source field provides values to be written to the value option when a button is selected. Leave valueExpr unspecified if you need the entire data object to be written to the value option.

JavaScript
var dataItems = [
    { text: "Low", color: "grey" },
    { text: "Normal", color: "green" },
    { text: "Urgent", color: "yellow" },
    { text: "High", color: "red" }
];

$(function() {
    $("#radioGroupContainer").dxRadioGroup({
        dataSource: dataItems,
        displayExpr: "text",
        // valueExpr: "color",
        value: dataItems[1]
    });
});

The RadioGroup widget supports horizontal (default for tablets) and vertical (default for other devices) layouts. To change the layout for all types of devices, specify the layout option.

JavaScript
$(function() {
    $("#radioGroupContainer").dxRadioGroup({
        dataSource: ["Low", "Normal", "Urgent", "High"],
        layout: "horizontal" // or "vertical"
    });
});
See Also