RadioButton

RadioButton is an extension to standard radio button element with skinning capabilities.

Import via Module


import { RadioButton } from 'primereact/radiobutton';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/radiobutton/radiobutton.min.js"></script>

Getting Started

RadioButton is used as a controlled input with checked and onChange properties.


<RadioButton value="val1" name="city" onChange={(e) => setValue(e.value)} checked={value === 'val1'} />
<RadioButton value="val2" name="city" onChange={(e) => setValue(e.value)} checked={value === 'val2'} />

Properties

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
inputId	string	null	Unique identifier of the inner native radiobutton.
name	string	null	Name of the checkbox element .
value	any	null	Value of the radiobutton.
checked	boolean	false	Specifies whether a radiobutton should be checked or not.
style	string	null	Inline style of the element.
className	string	null	Style class of the element.
disabled	boolean	false	When present, it specifies that the element value cannot be altered.
required	boolean	false	When present, it specifies that an input field must be filled out before submitting the form.
tooltip	any	null	Content of the tooltip.
tooltipOptions	object	null	Configuration of the tooltip, refer to the tooltip documentation for more information.

Events

Name	Parameters	Description
onChange	event.originalEvent: Original event event.value: Value of the radiobutton event.checked: Checked state as a boolean.	Callback to invoke on radio button click.