React Radio Button

Radio Button are key UI components that let users select a single option from predefined choices, often found in forms and surveys.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let’s add the React Radio Button component to the project.

Installing Syncfusion® React packages

To begin using the Radio Button component, you must install the @syncfusion/react-buttons package. This package provides the foundational framework and components for building consistent and efficient UI.

npm install @syncfusion/react-buttons

Adding CSS references

Integrate the necessary CSS files for the button component to ensure proper styling. Add these references in your src/App.css file as shown below:

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-buttons/styles/material.css';

Adding RadioButton component

To include the Radio Button component in your application, import the RadioButton from the @syncfusion/react-buttons package in App.tsx.

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

Add the Radio Button component in application as shown in below code example.

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

export default function App() {
    return (
    <div className="component-section" style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
        <RadioButton name='theme' value='light' defaultChecked={true} label='Light Mode' />
        <RadioButton name='theme' value='dark' label='Dark Mode' />
        <RadioButton name='theme' value='system' disabled={false} label='System Default' />
    </div>
    );
}

Run the project

To run the project, use the following command:

npm run dev

The following example demonstrates how to render a simple Radio Button component.

Label placement

The labelPlacement property, which allows for the placement of labels on Radio Button, enhances both the user experience and the overall visual aesthetics of the design.

Size

Easily customize the Radio Button's size to match your design requirements using its built-in sizing properties.

Disabled

The Radio Button component can be enabled or disabled using the disabled property; set it to true to disable.

Customization

The appearance of Radio Button can be tailored using inline CSS, allowing you to modify the background and border colors.

Form validation

Form validation ensures user inputs are complete and accurate. Discover how to use Radio Button for improved data integrity in submissions.

Accessibility

The Radio Button component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the Radio Button component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The Radio Button component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Radio button component:

Keyboard interaction

The Radio Button component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Radio button component.