React Radio Button - Simple and Customizable 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 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

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 RadioButton 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'));