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.
The following code adds a simple RadioGroup to your page. Here, the value property specifies the initially selected radio button.
jQuery
<div id="radioGroupContainer"></div>
$(function() { $("#radioGroupContainer").dxRadioGroup({ dataSource: ["Low", "Normal", "Urgent", "High"], value: "Low" }); });
Angular
<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.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.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
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
<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.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.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
$(function() { $("#radioGroupContainer").dxRadioGroup({ dataSource: ["Low", "Normal", "Urgent", "High"], layout: "horizontal" // or "vertical" }); });
Angular
<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.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.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
jQuery
Angular
Vue
React
If you have technical questions, please create a support ticket in the DevExpress Support Center.