React RadioGroup - Customize Item Appearance

For a minor customization of RadioGroup items, you can define specific fields in item data objects. For example, the following code generates three radio buttons: the first is disabled, the second is not customized, the third is hidden.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { RadioGroup } from 'devextreme-react/radio-group';
  •  
  • const dataSource = [
  • { text: 'Low', disabled: true },
  • { text: 'High' },
  • { text: 'Urgent', visible: false }
  • ];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <RadioGroup dataSource={dataSource}/>
  • );
  • }
  • }
  •  
  • export default App;

If you need a more flexible solution, define an itemTemplate.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { RadioGroup } from 'devextreme-react/radio-group';
  •  
  • const dataSource = ['Low', 'Normal', 'Urgent', 'High'];
  •  
  • const renderRadioGroupItem = (itemData) => {
  • return (
  • <div>
  • <p style={{fontSize: "larger"}}><b>{itemData}</b></p>
  • </div>
  • );
  • }
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <RadioGroup
  • dataSource={dataSource}
  • itemRender={renderRadioGroupItem}
  • />
  • );
  • }
  • }
  •  
  • export default App;
See Also