RadioButton is an extension to standard radio button element with theming.
import { RadioButton } from 'primereact/radiobutton';<RadioButton.Group>
<RadioButton />
</RadioButton.Group>Use the RadioButton.Group component with value and onValueChange props to control the selected state of radio buttons.
'use client';
import type { RadioButtonGroupValueChangeEvent } from '@primereact/types/shared/radiobutton';
import { RadioButton } from 'primereact/radiobutton';
import * as React from 'react';
export default function GroupDemo() {
const [ingredient, setIngredient] = React.useState<string | undefined>();
return (
<div className="card flex items-center justify-center">
<RadioButton.Group className="flex flex-wrap gap-4" value={ingredient} onValueChange={(e: RadioButtonGroupValueChangeEvent) => setIngredient(e.value as string)}>
<div className="flex items-center gap-2">
<RadioButton inputId="ingredient1" name="pizza" value="cheese" />
<label htmlFor="ingredient1">Cheese</label>
</div>
<div className="flex items-center gap-2">
<RadioButton inputId="ingredient2" name="pizza" value="mushroom" />
<label htmlFor="ingredient2">Mushroom</label>
</div>
<div className="flex items-center gap-2">
<RadioButton inputId="ingredient3" name="pizza" value="pepper" />
<label htmlFor="ingredient3">Pepper</label>
</div>
<div className="flex items-center gap-2">
<RadioButton inputId="ingredient4" name="pizza" value="onion" />
<label htmlFor="ingredient4">Onion</label>
</div>
</RadioButton.Group>
</div>
);
}RadioButtons can be generated using a list of values.
'use client';
import type { RadioButtonGroupValueChangeEvent } from '@primereact/types/shared/radiobutton';
import { RadioButton } from 'primereact/radiobutton';
import { RadioButtonGroup } from 'primereact/radiobutton/group';
import * as React from 'react';
export default function DynamicDemo() {
const [ingredient, setIngredient] = React.useState<string | undefined>();
const categories = [
{ name: 'Accounting', key: 'A' },
{ name: 'Marketing', key: 'M' },
{ name: 'Production', key: 'P' },
{ name: 'Research', key: 'R' }
];
return (
<div className="card flex items-center justify-center">
<RadioButtonGroup className="flex flex-wrap gap-4" value={ingredient} onValueChange={(e: RadioButtonGroupValueChangeEvent) => setIngredient(e.value as string)}>
{categories.map((item) => (
<div key={item.key} className="flex items-center gap-2">
<RadioButton inputId={item.key} name="category" value={item.key} />
<label htmlFor={item.key}>{item.name}</label>
</div>
))}
</RadioButtonGroup>
</div>
);
}RadioButtons can be displayed in a card style.
'use client';
import type { RadioButtonGroupValueChangeEvent } from '@primereact/types/shared/radiobutton';
import { RadioButton } from 'primereact/radiobutton';
import React from 'react';
const CardDemo = () => {
const [selectedCard, setSelectedCard] = React.useState<string | undefined>();
const cards = [
{ id: 'card1', name: '💳 Credit Card', description: 'Pay with Visa, Mastercard, or AMEX.' },
{ id: 'card2', name: '💸 PayPal', description: 'Connect your PayPal account' },
{ id: 'card3', name: '🪙 Crypto', description: 'Pay with Bitcoin or Ethereum.' }
];
return (
<div className="card flex items-center justify-center">
<div>
<span className="font-semibold">Payment Method</span>
<RadioButton.Group value={selectedCard} onValueChange={(e: RadioButtonGroupValueChangeEvent) => setSelectedCard(e.value as string)} className="mt-4 grid grid-cols-1 lg:grid-cols-3 gap-4">
{cards.map((card) => (
<label
key={card.id}
htmlFor={card.id}
className={`flex-1 flex items-start gap-2 p-4 rounded-md border border-surface-200 dark:border-surface-800 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors cursor-pointer ${selectedCard === card.id ? '!border-primary' : ''}`}
>
<RadioButton inputId={card.id} name="card" value={card.id} />
<div className="flex-1 flex flex-col gap-2">
<div className="text-lg font-bold leading-none">{card.name}</div>
<div className="text-sm text-surface-500">{card.description}</div>
</div>
</label>
))}
</RadioButton.Group>
</div>
</div>
);
};
export default CardDemo;Use the size property to change the size of a radio button.
import { RadioButton } from 'primereact/radiobutton';
export default function SizesDemo() {
return (
<div className="card flex justify-center">
<div className="flex flex-wrap gap-4">
<div className="flex items-center gap-2">
<RadioButton inputId="size_small" name="size" size="small" />
<label htmlFor="size_small" className="text-sm">
Small
</label>
</div>
<div className="flex items-center gap-2">
<RadioButton inputId="size_normal" name="size" />
<label htmlFor="size_normal">Normal</label>
</div>
<div className="flex items-center gap-2">
<RadioButton inputId="size_large" name="size" size="large" />
<label htmlFor="size_large" className="text-lg">
Large
</label>
</div>
</div>
</div>
);
}Specify the filled property to display the component with a higher visual emphasis than the default outlined style.
import { RadioButton } from 'primereact/radiobutton';
export default function FilledDemo() {
return (
<div className="card flex items-center justify-center">
<RadioButton variant="filled" />
</div>
);
}When the disabled property is present, the element cannot be edited and focused.
import { RadioButton } from 'primereact/radiobutton';
export default function DisabledDemo() {
return (
<div className="card flex justify-center">
<RadioButton.Group className="flex items-center gap-2" value="2">
<RadioButton disabled />
<RadioButton value="2" disabled />
</RadioButton.Group>
</div>
);
}Invalid state is displayed using the invalid property to indicate a failed validation. You can use this style when integrating with form validation libraries.
import { RadioButton } from 'primereact/radiobutton';
export default function InvalidDemo() {
return (
<div className="card flex justify-center">
<RadioButton invalid />
</div>
);
}RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.
<label for="rb1">One</label>
<RadioButton inputId="rb1" />
<span id="rb2">Two</span>
<RadioButton aria-labelledby="rb2" />
<RadioButton aria-label="Three" />