React Radio Button - Flexible UI for Single-Choice Selection

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.

React Radio Button code example

Get started with the React Radio Button component using a few simple lines of TSX code as demonstrated below. Also, explore our React Radio Button example that shows how to render and configure the component.

import { RadioButton } from '@syncfusion/react-buttons';

export default function App() {
  return (
    <div className="component-section">
      <RadioButton name='theme' value='light' defaultChecked={true} label='Light Mode' />
      <RadioButton name='theme' value='dark' label='Dark Mode' />
    </div>
  );
}

Radio Button label

The label defines the caption displayed next to the React Radio Button. Position the label before or after the radio button based on the application requirements.

• Radio button label demo

Forms support

The React Radio Button component integrates seamlessly with native HTML form validation. This ensures consistent behavior across form submissions, enabling the validation of required fields and improving overall form reliability and accessibility.

• Radio Button form validation

Web accessibility

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