RadioGroup Edit

Use a RadioGroup component when you want users to select one option from a small set of options.

RadioGroup component

Table of contents Table of contents

  1. Design guidelines
  2. Development guidelines
  3. Related components

Top ↑

Design guidelines Design guidelines

Usage Usage

Selected action Selected action

Only one option in a radio group can be selected and active at a time. Selecting one option deselects any other.

Top ↑

Best practices Best practices

Radio groups should:

  • Be clearly and accurately labeled.
  • Clearly communicate that clicking or tapping will trigger an action.
  • Use established colors appropriately. For example, only use red buttons for actions that are difficult or impossible to undo.
  • Have consistent locations in the interface.
  • Have a default option already selected.

Top ↑

States States

Top ↑

Active and available radio groups Active and available radio groups

A radio group’s state makes it clear which option is active. Hover and focus states express the available selection options for buttons in a button group.

Top ↑

Disabled radio groups Disabled radio groups

Radio groups that cannot be selected can either be given a disabled state, or be hidden.

Top ↑

Development guidelines Development guidelines

Top ↑

Usage Usage

Top ↑

Controlled Controlled

import { Radio, RadioGroup } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyControlledRadioRadioGroup = () => {
    const [ checked, setChecked ] = useState( '25' );
    return (
        <RadioGroup label="Width" onChange={ setChecked } checked={ checked }>
            <Radio value="25">25%</Radio>
            <Radio value="50">50%</Radio>
            <Radio value="75">75%</Radio>
            <Radio value="100">100%</Radio>
        </RadioGroup>
    );
};

Top ↑

Uncontrolled Uncontrolled

When using the RadioGroup component as an uncontrolled component, the default value can be set with the defaultChecked prop.

import { __experimentalRadio as Radio, __experimentalRadioGroup as RadioGroup } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyUncontrolledRadioRadioGroup = () => {
    return (
        <RadioGroup label="Width" defaultChecked="25">
            <Radio value="25">25%</Radio>
            <Radio value="50">50%</Radio>
            <Radio value="75">75%</Radio>
            <Radio value="100">100%</Radio>
        </RadioGroup>
    );
};

Top ↑

  • For simple buttons that are related, use a ButtonGroup component.
  • For traditional radio options, use a RadioControl component.