How to customize appearance in React Radio Button

4 Sep 20264 minutes to read

Customize the React Radio Button’s visual appearance by applying custom CSS rules through the cssClass property. Define CSS classes targeting the React Radio Button element, then apply them to change styling attributes like background color, border color, and size.

Create semantic style variants (primary, success, warning, danger, info) by defining custom CSS classes that override the default React Radio Button colors and borders. This approach allows you to match your application’s design system and provide visual feedback for different states or categories.

import { RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To customize RadioButton appearance.
function App() {
    return (<ul>
          {/* Refer the 'e-primary' class details in 'style.css'.*/}
          <li><RadioButtonComponent label="Primary" cssClass="e-primary" name="custom"/></li>

          {/* Refer the 'e-success' class details in 'style.css'.*/}
          <li><RadioButtonComponent label="Success" cssClass="e-success" name="custom"/></li>

          {/* Refer the 'e-info' class details in 'style.css'.*/}
          <li><RadioButtonComponent label="Info" cssClass="e-info" checked={true} name="custom"/></li>

          {/* Refer the 'e-warning' class details in 'style.css'.*/}
          <li><RadioButtonComponent label="Warning" cssClass="e-warning" name="custom"/></li>

          {/* Refer the 'e-danger' class details in 'style.css'.*/}
          <li><RadioButtonComponent label="Danger" cssClass="e-danger" name="custom"/></li>
      </ul>);
}
export default App;
ReactDom.render(<App />, document.getElementById('radio-button'));
import { RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To customize RadioButton appearance.
function App() {
  return (
      <ul>
          {/* Refer the 'e-primary' class details in 'style.css'.*/}
          <li><RadioButtonComponent label="Primary" cssClass="e-primary" name="custom" /></li>

          {/* Refer the 'e-success' class details in 'style.css'.*/}
          <li><RadioButtonComponent label="Success" cssClass="e-success" name="custom" /></li>

          {/* Refer the 'e-info' class details in 'style.css'.*/}
          <li><RadioButtonComponent label="Info" cssClass="e-info" checked={true} name="custom" /></li>

          {/* Refer the 'e-warning' class details in 'style.css'.*/}
          <li><RadioButtonComponent label="Warning" cssClass="e-warning" name="custom" /></li>

          {/* Refer the 'e-danger' class details in 'style.css'.*/}
          <li><RadioButtonComponent label="Danger" cssClass="e-danger" name="custom" /></li>
      </ul>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('radio-button'));