单选按钮组

最后更新：2026-10-17 10:55:29

此组件已弃用。建议改用 `RadioControl` 或 `ToggleGroupControl`。

此功能仍处于实验阶段。“Experimental”（实验性）意味着这是早期实现，可能会发生剧烈且破坏性的更改。

当希望用户从少量选项中选择一个选项时，请使用 RadioGroup 组件。

RadioGroup 组件

设计规范

用法

选中的操作

同一时间只能选中并激活单选组中的一个选项。选中一个选项将取消选中其他所有选项。

最佳实践

单选组应：

具有清晰准确的标签。
明确传达点击或触摸将触发操作。
适当使用既定颜色。例如，仅对难以或无法撤销的操作使用红色按钮。
在界面中保持位置一致。
默认选中一个选项。

状态

可用且处于活动状态的单选组

单选组的状态应明确指示哪个选项处于活动状态。悬停和聚焦状态用于表达按钮组中按钮的可选选项。

禁用的单选组

不可选中的单选组可以设置为禁用状态，或者被隐藏。

开发指南

用法

受控组件

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

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

非受控组件

当将 RadioGroup 组件用作非受控组件时，可以使用 defaultChecked 属性设置默认值。

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

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