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.

  • 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.

  • 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.

  • 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