Source: https://primereact.org/radiobutton/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

RadioButton

RadioButton is an extension to standard radio button element with theming.

Import#

import { RadioButton } from 'primereact/radiobutton';

Copy

Group#

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

Cheese

Mushroom

Pepper

Onion

<div className="flex flex-wrap gap-3">
    <div className="flex align-items-center">
        <RadioButton inputId="ingredient1" name="pizza" value="Cheese" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Cheese'} />
        <label htmlFor="ingredient1" className="ml-2">Cheese</label>
    </div>
    <div className="flex align-items-center">
        <RadioButton inputId="ingredient2" name="pizza" value="Mushroom" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Mushroom'} />
        <label htmlFor="ingredient2" className="ml-2">Mushroom</label>
    </div>
    <div className="flex align-items-center">
        <RadioButton inputId="ingredient3" name="pizza" value="Pepper" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Pepper'} />
        <label htmlFor="ingredient3" className="ml-2">Pepper</label>
    </div>
    <div className="flex align-items-center">
        <RadioButton inputId="ingredient4" name="pizza" value="Onion" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Onion'} />
        <label htmlFor="ingredient4" className="ml-2">Onion</label>
    </div>
</div>

Copy

Dynamic#

RadioButtons can be generated using a list of values.

Accounting

Marketing

Production

Research

{categories.map((category) => {
    return (
        <div key={category.key} className="flex align-items-center">
            <RadioButton inputId={category.key} name="category" value={category} onChange={(e) => setSelectedCategory(e.value)} checked={selectedCategory.key === category.key} />
            <label htmlFor={category.key} className="ml-2">{category.name}</label>
        </div>
    );
})}

Copy

Filled#

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

<RadioButton variant="filled" />

Copy

Invalid#

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.

<RadioButton invalid/>

Copy

Disabled#

When disabled is present, the element cannot be edited and focused.

<RadioButton checked disabled></RadioButton>

Copy

Accessibility#

Screen Reader

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 inputId prop or using aria-labelledby, aria-label props.

<label htmlFor="rb1">One</label>
<RadioButton inputId="rb1" />

<span id="rb2">Two</span>
<RadioButton aria-labelledby="rb2" />

<RadioButton aria-label="Three" />

Copy

Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus. | | left arrow__up arrow | Moves focus to the previous radio button, if there is none then last radio button receives the focus. | | right arrow__down arrow | Moves focus to the next radio button, if there is none then first radio button receives the focus. | | space | If the focused radio button is unchecked, changes the state to checked. |

Import
Group
Dynamic
Filled
Invalid
Disabled
Accessibility

PrimeReact 10.9.7 by PrimeTek