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.

jQuery
HTML
JavaScript
<div id="radioGroupContainer"></div>
$(function() {
    $("#radioGroupContainer").dxRadioGroup({
        dataSource: ["Low", "Normal", "Urgent", "High"],
        value: "Low"
    });
});
Angular
HTML
TypeScript
<dx-radio-group
    [dataSource]="dataSource"
    value="Low">
</dx-radio-group>
import { DxRadioGroupModule } from "devextreme-angular";
// ...
export class AppComponent {
    dataSource = ["Low", "Normal", "Urgent", "High"]
}
@NgModule({
    imports: [
        // ...
        DxRadioGroupModule
    ],
    // ...
})
Vue
<template>
    <DxRadioGroup
        :data-source="dataSource"
        value="Low"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxRadioGroup } from 'devextreme-vue/radio-group';

export default {
    components: {
        DxRadioGroup
    },
    data() {
        return {
            dataSource: ['Low', 'Normal', 'Urgent', 'High']
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { RadioGroup } from 'devextreme-react/radio-group';

const dataSource = ['Low', 'Normal', 'Urgent', 'High'];

class App extends React.Component {
    render() {
        return (
            <RadioGroup
                dataSource={dataSource}
                value="Low"
            />
        );
    }
}

export default App;

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.

jQuery
JavaScript
const 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]
    });
});
Angular
HTML
TypeScript
<dx-radio-group
    [dataSource]="dataItems"
    [value]="radioGroupValue"
    displayExpr="text">
</dx-radio-group>
import { DxRadioGroupModule } from "devextreme-angular";
// ...
export class AppComponent {
    dataItems = [
        { text: "Low", color: "grey" },
        { text: "Normal", color: "green" },
        { text: "Urgent", color: "yellow" },
        { text: "High", color: "red" }
    ];
    radioGroupValue = dataItems[1];
}
@NgModule({
    imports: [
        // ...
        DxRadioGroupModule
    ],
    // ...
})
Vue
<template>
    <DxRadioGroup
        :data-source="dataItems"
        :value="radioGroupValue"
        display-expr="text"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxRadioGroup } from 'devextreme-vue/radio-group';

const items = [
    { text: 'Low', color: 'grey' },
    { text: 'Normal', color: 'green' },
    { text: 'Urgent', color: 'yellow' },
    { text: 'High', color: 'red' }
];

export default {
    components: {
        DxRadioGroup
    },
    data() {
        return {
            dataItems: items,
            radioGroupValue: items[1]
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { RadioGroup } from 'devextreme-react/radio-group';

const dataItems = [
    { text: 'Low', color: 'grey' },
    { text: 'Normal', color: 'green' },
    { text: 'Urgent', color: 'yellow' },
    { text: 'High', color: 'red' }
];

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: dataItems[1]
        };
    }

    render() {
        return (
            <RadioGroup
                dataSource={dataItems}
                value={this.state.value}
                displayExpr="text"
            />
        );
    }
}

export default App;

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.

jQuery
JavaScript
$(function() {
    $("#radioGroupContainer").dxRadioGroup({
        dataSource: ["Low", "Normal", "Urgent", "High"],
        layout: "horizontal" // or "vertical"
    });
});
Angular
HTML
TypeScript
<dx-radio-group
    [dataSource]="dataSource"
    layout="horizontal">
</dx-radio-group>
import { DxRadioGroupModule } from "devextreme-angular";
// ...
export class AppComponent {
    dataSource = ["Low", "Normal", "Urgent", "High"]
}
@NgModule({
    imports: [
        // ...
        DxRadioGroupModule
    ],
    // ...
})
Vue
<template>
    <DxRadioGroup
        :data-source="dataSource"
        layout="horizontal"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxRadioGroup } from 'devextreme-vue/radio-group';

export default {
    components: {
        DxRadioGroup
    },
    data() {
        return {
            dataSource: ['Low', 'Normal', 'Urgent', 'High']
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { RadioGroup } from 'devextreme-react/radio-group';

const dataSource = ['Low', 'Normal', 'Urgent', 'High'];

class App extends React.Component {
    render() {
        return (
            <RadioGroup
                dataSource={dataSource}
                layout="horizontal"
            />
        );
    }
}

export default App;
See Also