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.
- 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
If you have technical questions, please create a support ticket in the DevExpress Support Center.