单选

如果希望用户从一组小选项中选择一个选项，请使用RadioGroup组件。

设计指南

用法

选定的操作

一次只能选择和激活收音机组中的一个选项。选择一个选项将取消选择任何其他选项。

最佳实践

广播组应：

• 标签应清晰准确。
• 清楚地传达点击或轻触将触发动作。
• 适当使用既定颜色。例如，仅对难以或无法撤消的操作使用红色按钮。
• 在界面中具有一致的位置。
• 已选择默认选项。

州

活动和可用的收音机组

广播组的状态可以清楚地显示哪个选项处于活动状态。悬停和焦点状态表示按钮组中按钮的可用选择选项。

禁用的广播组

无法选择的无线电组可以被赋予禁用状态，也可以被隐藏。

发展指南

用法

受约束的

从'react'导入{useState}；导入{__实验无线电作为无线电，__experimentalRadioGroup作为RadioGroup，}来自“@wordpress/components”；const MyControlledRadioRadioGroup=（）=>{const[checked，setChecked]=使用状态（'25'）；返回(<RadioGroup label=“Width”onChange={setChecked}checked={checked}><无线电值=“25”>25%</无线电><无线电值=“50”>50%</无线电><无线电值=“75”>75%<无线电值=“100”>100%</无线电></收音机组>);};

非受控

将RadioGroup组件用作非受控组件时，可以使用默认选中道具。

从'react'导入{useState}；导入{__实验无线电作为无线电，__experimentalRadioGroup作为RadioGroup，}来自“@wordpress/components”；const MyUncontrolledRadioRadioGroup=（）=>{返回(<RadioGroup label=“Width”defaultChecked=“25”><无线电值=“25”>25%</无线电><无线电值=“50”>50%</无线电><无线电值=“75”>75%<无线电值=“100”>100%</无线电></收音机组>);};

相关组件

• 对于相关的简单按钮，请使用按钮组组件。
• 对于传统收音机选项，请使用无线电控制组件。