单选按钮

使用单选按钮在选项列表中显示每个项目，商家必须在其中进行单个选择。

在商家必须进行单一选择的地方使用单选按钮。

进口｛堆栈，RadioButton}从“@shopify /北极星”；进口｛useState，useCallback}从“反应”；函数RadioButtonExample（）｛常量［价值，setValue]=useState（“禁用”）；常量handleChange=useCallback（（_checked，newValue）＝＞setValue（newValue），［]，）；返回（<堆栈垂直><RadioButton标签=“帐户被禁用”helpText=“顾客只能以客人的身份结账。”检查=｛价值＝＝＝“禁用”}id=“禁用”名字=“账户”onChange=｛handleChange}/><RadioButton标签=“账户是可选的”helpText=“顾客可以用客户账户或客人身份结账。”id=“可选的”名字=“账户”检查=｛价值＝＝＝“可选的”}onChange=｛handleChange}/></堆栈>）；}

道具

想让这个功能变得更好吗?请分享你的反馈。

接口 RadioButtonProps

ariaDescribedBy？字符串: 指示描述单选按钮的元素的ID。
标签反应。ReactNode: 单选按钮的标签。
labelHidden？布尔: 视觉上隐藏标签。
检查？布尔: 选中单选按钮。
helpText？反应。ReactNode: 辅助使用的附加文本。
禁用？布尔: 禁用输入。
id？字符串: 表单输入的ID。
名字？字符串: 表单输入的名称。
价值？字符串: 值用于表单输入。
onChange？（newValue：布尔，id：字符串) = >无效: 当单选按钮被切换时回调。
得到焦点？ () = >无效: 当单选按钮聚焦时回调。
元素失去焦点时？ () = >无效: 移除焦点时回调。

最佳实践

单选按钮应该:

总是与关联的标签组件一起使用。
成为下列单选按钮列表的一部分:
- 至少包括两个或两个以上的选择。
- 用于让商家只选择一个选项。
- 包含互斥选项——这意味着每个选项必须独立于列表中的其他选项。例如:红色、蓝色和黄色是互斥的。红、蓝、黄、红/蓝并不相互排斥。
- 以合乎逻辑的合理顺序列出选项。
- 尽可能选择一个默认选项。

内容的指导方针

单选按钮标签

单选按钮标签应该:

以冒号或标题开头
OB欧宝娱乐APP以大写字母开头

做

选项1

不

选项1

如果是一个句子、单词或片段，不要以标点符号结尾

做

红色的

不

红色;

切换(仅限Android和iOS)

切换标签应该:

明确商家启用或禁用了什么
OB欧宝娱乐APP以大写字母开头

切换值应该:

永远不要被贴上标签

为了使简单的单选按钮列表更容易构建，使用选择列表组件
对于冗长的选项列表，考虑select组件为了避免让商家不堪重负
要向商家显示复选框列表，使用选择列表组件使用“允许多个”选项
要显示相关内容的非交互式列表，使用内容列表组件

可访问性

屏幕阅读器自动显示单选按钮的状态。

使用禁用prop来应用HTML禁用属性设置为单选按钮<输入>。这使商家无法与单选按钮进行交互，并将其非活动状态传递给辅助技术。
使用id提供独一无二的道具id属性值用于单选按钮。如果一个id没有提供，则组件生成一个。所有单选按钮必须是唯一的id正确使用辅助技术的值。

键盘支持

将焦点移动到单选按钮组选项卡键(或转变+选项卡当向后滑动时)
使用向上和向下方向键更改所选择的单选按钮

单选按钮

道具

最佳实践

内容的指导方针

单选按钮标签

做

不

做

不

切换(仅限Android和iOS)

相关的组件

可访问性

标签

键盘支持