Radio Button Component

The RadioButton component allows users to select a single option from a group, utilizing a circular input field that provides a clear user selection interface.

Usage

To import and use the Radio Button component in your application, use the following code snippet:

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

<RadioButton checked={true} label="Choose this option" name="choices" />

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

<RadioButton checked={true} label="Choose this option" name="choices" />

Demos

Explore the demos of the React Radio Button component. Refer to this page.

Props

The following table outlines the props for the Radio Button component:

Name	Type	Default	Description
checked	boolean	false	Specifies whether the RadioButton is `checked` (`true`) or unchecked (`false`). Use for controlled components.
color	Color	-	Specifies the Color style of the radio-button. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Error', and 'Info'.
defaultChecked	boolean	false	Specifies the initial checked state of the RadioButton. Use for uncontrolled components.
label	string	-	Defines the caption for the RadioButton, that describes the purpose of the RadioButton.
labelPlacement	LabelPlacement	LabelPlacement.After	Specifies the position of the label relative to the RadioButton. It determines whether the label appears before or after the radio button element in the UI.
size	Size	Size.Medium	Specifies the size style of the checkbox. Options include 'Small', 'Medium' and 'Large'.
value	string	-	Defines `value` attribute for the RadioButton. It is a form data passed to the server when submitting the form.

Events

The following table outlines the events for the Radio Button component:

Name	Type	Description
onChange	(event: RadioButtonChangeEvent) => void	Event trigger when the RadioButton state has been changed by user interaction.