Your search did not match any results.
Radio Group

Radio Group

Documentation

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. This demo illustrates how to change the widget layout, define a custom template and handle the value change event.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import { RadioGroup } from 'devextreme-react'; import { priorities, tasks } from './data.js'; const customItemRender = (data) => <div>{data}</div>; class App extends React.Component { constructor(props) { super(props); this.state = { colorPriority: priorities[2], selectionPriority: priorities[0] }; this.changeColorPriority = this.changeColorPriority.bind(this); this.changeSelectionPriority = this.changeSelectionPriority.bind(this); } render() { return ( <div className={'form'}> <div className={'dx-fieldset'}> <div className={'dx-field'}> <div className={'dx-field-label'}>Default mode</div> <div className={'dx-field-value'}> <RadioGroup items={priorities} defaultValue={priorities[0]} /> </div> </div> <div className={'dx-field'}> <div className={'dx-field-label'}>Disabled</div> <div className={'dx-field-value'}> <RadioGroup items={priorities} defaultValue={priorities[1]} disabled={true} /> </div> </div> <div className={'dx-field'}> <div className={'dx-field-label'}>Horizontal layout</div> <div className={'dx-field-value'}> <RadioGroup items={priorities} defaultValue={priorities[0]} layout={'horizontal'} /> </div> </div> <div className={'dx-field'}> <div className={'dx-field-label'}>Custom item template</div> <div className={'dx-field-value'}> <RadioGroup className={this.state.colorPriority.toLowerCase()} items={priorities} value={this.state.colorPriority} itemRender={customItemRender} onValueChanged={this.changeColorPriority} /> </div> </div> <div className={'dx-field'}> <div className={'dx-field-label'}>Event handling</div> <div className={'dx-field-value'}> <RadioGroup id={'radio-group-with-selection'} items={priorities} value={this.state.selectionPriority} onValueChanged={this.changeSelectionPriority} /> </div> </div> </div> <div id={'tasks-list'}> Tasks by selected priority: <ul id={'list'}> {tasks.filter(task => task.priority == this.state.selectionPriority).map(task => <li key={task.id}>{task.subject}</li>)} </ul> </div> </div> ); } changeColorPriority(e) { this.setState({ colorPriority: e.value }); } changeSelectionPriority(e) { this.setState({ selectionPriority: e.value }); } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
.low .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { background: gray; } .normal .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { background: green; } .urgent .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { background: orange; } .high .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { background: red; } #radio-group-with-selection { margin-bottom: 10px; } #tasks-list { margin: 0 0 10px 10px; white-space: normal; } #list { margin: 10px 0 0 20px; padding-left: 0; text-align: left; }
export const priorities = ['Low', 'Normal', 'Urgent', 'High']; export const tasks = [{ id: 0, subject: 'Choose between PPO and HMO Health Plan', priority: 'High' }, { id: 1, subject: 'Non-Compete Agreements', priority: 'Low' }, { id: 2, subject: 'Comment on Revenue Projections', priority: 'Normal' }, { id: 3, subject: 'Sign Updated NDA', priority: 'Urgent' }, { id: 4, subject: 'Submit Questions Regarding New NDA', priority: 'High' }, { id: 5, subject: 'Rollout of New Website and Marketing Brochures', priority: 'High' }];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-react': 'npm:devextreme-react@19.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });