React Radio Button - Customizable and Flexible UI Component

Overview

The React Radio Button is a custom radio-type HTML5 input component for selecting one option from a list of predefined choices. It supports different states, sizes, labels, label positions, and UI customizations.

Radio Button group

The React Radio Button component is used to select a single option from the logically grouped options set.

Forms support

Seamlessly supports HTML, template-driven (Angular), and reactive forms.

Built-in themes

The React Radio button component supports built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by simply overriding SASS variables or using the Theme Studio application.

• Theme Studio Application

Appearance

Customize the look and feel of the Radio Button by changing its fill color, background, border, and item opacity.

• Appearance documentation
• How to customize react radio button

Other supported frameworks

The Radio Button component is also available in Blazor, Vue, Angular, and JavaScript frameworks. Check out the different Radio Button platforms from the links below,

• Blazor Radio Button

• Vue Radio Button

• Angular Radio Button

• JavaScript Radio Button

Web Accessibility

• Fully supports WAI-ARIA accessibility to work with screen readers and assistive devices.
• Follows WAI-ARIA best practices for implementing keyboard interaction.
• Based on WCAG 2.0 standards, the UI visual elements such as foreground color, background color, line spacing, text, and images are designed.
• Supports right-to-left (RTL) text direction for users working with RTL languages like Hebrew, Arabic, or Persian.

React Radio Button Code Example

Easily get started with the React Radio Button Component using a few simple lines of TSX code example as demonstrated below. Also explore our React Radio Button Example that shows you how to render and configure a Radio Button Component in React.

import { enableRipple } from '@syncfusion/ej2-base';
import { RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render RadioButton.
class App extends React.Component<{}, {}> {
  public render() {
    return (
      <ul>
      <li><RadioButtonComponent label="Option 1" name="default" /></li>
      <li><RadioButtonComponent label="Option 2" name="default" /></li>
      </ul>
    );
  }
}
ReactDom.render(<App />, document.getElementById('radio-button'));