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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.