RadioButton

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

Import#


import { RadioButton } from 'primereact/radiobutton';

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>

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>
    );
})}

Invalid#

Invalid state style is added using the p-invalid class to indicate a failed validation.


<RadioButton className="p-invalid" />

Disabled#

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


<RadioButton checked disabled></RadioButton>

Form#

Compatibility with popular React form libraries.

Formik#

Formik is a popular library for handling forms in React.


<Toast ref={toast} />
{radioBtns.map((btn, i) => {
    return (
        <div key={i} className="flex align-items-center mr-3">
        <RadioButton
            {...btn}
                checked={formik.values.item === btn.value}
                onChange={(e) => {
                    formik.setFieldValue('item', e.value);
                }}
                />
            <label htmlFor={btn.inputId} className="ml-1">
            {btn.value}
                </label>
            </div>
        );
})}
</div>
{getFormErrorMessage('item')}
<Button type="submit" label="Submit" />

Hook Form#

React Hook Form is another popular React library to handle forms.


<Toast ref={toast} />
    <Controller
        name="value"
        control={control}
        rules={{ required: 'Value is required.' }}
        render={({ field }) => (
            <>
                <div>Please choose your ingredient.</div>
                <div className="flex justify-content-center">
                    <div className="flex align-items-center">
                        <RadioButton inputId="f5" {...field} inputRef={field.ref} value="Cheese" checked={field.value === 'Cheese'} />
                        <label htmlFor="f5" className="ml-1 mr-3">
                            Cheese
                        </label>

                        <RadioButton inputId="f6" {...field} value="Mushroom" checked={field.value === 'Mushroom'} />
                        <label htmlFor="f6" className="ml-1 mr-3">
                            Mushroom
                        </label>

                        <RadioButton inputId="f6" {...field} value="Pepper" checked={field.value === 'Pepper'} />
                        <label htmlFor="f6" className="ml-1 mr-3">
                            Pepper
                        </label>

                        <RadioButton inputId="f7" {...field} value="Onion" checked={field.value === 'Onion'} />
                        <label htmlFor="f7" className="ml-1 mr-3">
                            Onion
                        </label>
                    </div>
                </div>
                {getFormErrorMessage(field.name)}
                <Button label="Submit" type="submit" icon="pi pi-check" />
            </>
        )}
    />

Style#

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-radiobutton	Container element
p-radiobutton-box	Container of icon.
p-radiobutton-icon	Icon element.
p-radiobutton-label	Label element.

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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" />

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 arrowup arrow	Moves focus to the previous radio button, if there is none then last radio button receives the focus.
right arrowdown 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.