复选框

复选框最常用来为商家提供一种进行一系列选择(零个、一个或多个)的方式。它们也可以被用作让商家表示他们同意特定条款和服务的一种方式。

在窗体中用于切换某物的状态。默认复选框可以显示为选中和禁用或未选中。

进口｛复选框｝从“@shopify /北极星”；进口｛useState，useCallback｝从“反应”；函数CheckboxExample（）｛常量［检查，setChecked］＝useState（假）；常量handleChange＝useCallback（（newChecked）= >setChecked（newChecked），［］）；返回（<复选框标签＝“基本”复选框检查＝｛检查｝onChange＝｛handleChange｝/>）；｝

道具

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

接口 CheckboxProps

ariaControls? 字符串: 指示复选框控制的元素的ID。
ariaDescribedBy? 字符串: 指示描述复选框的元素的ID。
标签反应．ReactNode: 复选框的标签。
labelHidden? 布尔: 在视觉上隐藏标签。
检查? 布尔|“不确定”: 复选框被选中。' indeterminate '在复选框中显示一条水平线。
helpText? 反应．ReactNode: 辅助使用的附加文本。
禁用? 布尔: 禁用输入。
id? 字符串: 表单输入的ID。
的名字? 字符串: 表单输入的名称。
价值? 字符串: 值用于表单输入。
错误? 任何: 显示错误消息。
onChange? （newChecked：布尔，id：字符串) = >无效: 切换复选框时的回调。
得到焦点? () = >无效: 对焦复选框时的回调。
元素失去焦点时? () = >无效: 移除焦点时的回调。

最佳实践

复选框:

彼此独立工作:选择一个复选框不应该改变列表中另一个复选框的选择状态。例外情况是使用复选框对多个项目进行批量选择。
积极地看待问题:例如，打开通知而不是关闭通知
在使用开关设置时，一定要有一个标签
按照逻辑顺序列出，无论是字母顺序、数字顺序、时间顺序，还是其他一些清晰的系统。
链接到更多信息，或根据需要添加字幕，以提供更多解释。不要依赖工具提示来解释复选框。

内容的指导方针

与复选框列表

使用复选框的列表应该:

OB欧宝娱乐APP以大写字母开头

做

选项1
选项2
选项3

不

选项1
选项2
选项3

不要在每行末尾使用逗号或分号

做

红色的
黄色的
蓝色的

不

红色;
黄色;
蓝色的。

在极少数情况下，复选框要求商家同意条款或服务，使用第一人称

做

我同意服务条款。

不

您同意本服务条款

为了提供一个选项列表，让商家只能做一个选择，使用单选按钮组件
要显示相关内容的列表，使用选择列表组件
要创建一个未分组列表，使用内容列表组件

可访问性

屏幕阅读器自动传递复选框的状态。

使用禁用prop来应用HTML禁用属性设置为复选框<输入>．这阻止了商家与复选框进行交互，并将其不活跃状态传递给辅助技术。
使用id提供独特的道具id属性值的复选框。如果一个id没有提供，则组件生成一个。所有的复选框必须是唯一的id与辅助技术一起正确工作的值。
设置检查= "不确定"使用来传递复选框的状态aria-checked = "混合"．
设置ariaControls控件将其内容或存在由复选框控制的元素的ID传递给屏幕阅读器用户aria-controls属性。

键盘支持

方法将焦点移动到每个复选框选项卡键(或转变+选项卡当向后移动)
若要在复选框具有键盘焦点时与它交互，请按空间关键

复选框

道具

最佳实践

内容的指导方针

与复选框列表

做

不

做

不

做

不

相关的组件

可访问性

标签

键盘支持