React RadioGroup - Overview

The RadioGroup is a UI component 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 property 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 properties. displayExpr specifies which data source field provides texts for buttons; valueExpr specifies which data source field provides values to be written to the value property when a button is selected. Leave valueExpr unspecified if you need the entire data object to be written to the value property.

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 UI component supports horizontal (default for tablets) and vertical (default for other devices) layouts. To change the layout for all types of devices, specify the layout property.

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