窗体切换

FormToggle打开或关闭单个设置。

设计指南

用法

何时使用切换

当您希望用户执行以下操作时，请使用切换：

• 打开或关闭单个选项。
• 立即激活或停用某物。

做
使用切换开关可以打开或关闭某个选项。

不要这样
不要使用单选按钮进行开关设置。

当用户不希望提交数据时，最好使用切换，例如复选框和单选按钮。

州

当用户将切换拇指（1）滑动到轨迹（2）的另一侧，切换状态发生变化时，切换成功。

文本标签

切换应该具有清晰的内联标签，以便用户确切知道切换控件的选项，以及该选项是启用还是禁用。

不要在切换元素本身中包含任何文本（例如“on”或“off”）。仅开关就足以传达状态。

行为

当用户切换切换时，其相应的操作将立即生效。

发展指南

用法

从'react'导入{useState}；从“@wordpress/components”导入{FormToggle}；const MyFormToggle=（）=>{const[isChecked，setChecked]=使用状态（true）；返回(<窗体切换选中={isChecked}onChange={（）=>setChecked（（state）=>！state）}/>);};

道具

组件接受以下道具：

选中的:布尔值

如果选中为true，则将选中切换。如果选中为false，则将取消选中切换。
如果未传递任何值，则将取消选中切换。

• 必需：否

禁用:布尔值

如果禁用为true，则将禁用切换并应用适当的样式。

• 必需：否

onChange（更改时）:（事件：ChangeEvent<HTMLInputElement>）=>无效

单击切换时调用的回调函数。

• 必需：是

相关组件

• 要从一个集合中选择一个选项，并且希望一次显示所有可用选项，请使用收音机组件。
• 要从集合中选择一个或多个项目，请使用复选框控件组件。
• 要显示带有标签和帮助文本的切换，请使用切换控件组件。