React Radio buttons（单选按钮）组件

编辑此页面Radio 单选框组件用户可以通过单选按钮从一组中选择一个选项。

当用户想要看到所有的选项时，可以使用 单选按钮。 如果可用选项可以折叠，请您考虑使用占用空间更少的下拉菜单。

默认情况下，单选按钮应该选择了最常用的选项。

RadioGroup 单选框组RadioGroup 适用于一组 Radio，它提供相对简单的 API 并且能够使用键盘对该 RadioGroup 进行控制。

GenderFemaleMaleOther(Disabled option)

Gender

} label="Female" />

} label="Male" />

} label="Other" />

} label="(Disabled option)" />

要横向布置按钮，请将 row 属性设置为：。

Standalone radio buttons 独立的单选框按钮Radio 也可以单独使用，无需额外的 RadioGroup wrapper。

标签放置你可以用 FormControlLabel 组件的 labelPlacement 属性来改变标签的位置。

labelPlacementTopStartBottomEnd显示错误一般来说，单选按钮应带有一个默认选中的值。 如果不是这种情况，若用户在提交表单时如果未选择任何值，您可以让其显示一个错误：

Pop quiz: Material-UI is...The best!The worst.Choose wisely

Check Answer

Pop quiz: Material-UI is...

} label="The best!" />

} label="The worst." />

{helperText}

Check Answer

Customized radios 自定义单选框以下是自定义组件的一个示例。 您可以在 重写文档页 中了解有关此内容的更多信息。

GenderFemaleMaleOther(Disabled option)

Gender

} label="Female" />

} label="Male" />

} label="Other" />

value="disabled"

disabled

control={}

label="(Disabled option)"

/>

什么时候使用

复选框 对比 单选按钮

无障碍设计(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#radiobutton)

所有表单控件都应该带有标签，而这包括了单选按钮，复选框和开关。 在大多数情况下，这是通过使用一个 元素（FormControlLabel）实现的。

如果无法使用标签，您则必须在输入组件中直接添加属性。 在这种情况下，您可以经由 inputProps 属性，来附着一些额外的属性（例如 arial-label，aria-labelledby，title）。

value="radioA"

inputProps={{ 'aria-label': 'Radio A' }}

/>

API

Date/Time 日期/时间选择器Select 选择器