表单切换-WordPress区块编辑器手册-果果开发

FormToggle 用于开启或关闭单个设置。

开启和关闭状态的 FormToggle。上方的开关处于开启状态，下方的开关处于关闭状态。

设计规范

使用场景

何时使用开关

在以下情况下请使用开关：

切换单个选项的开启或关闭状态。
立即激活或停用某项功能。

用于“固定背景”设置的 FormToggle

建议做法
使用开关来切换选项的开启或关闭状态。

用于“固定背景”设置的单选按钮

避免做法
不要对需要切换开启和关闭状态的使用单选按钮。

与复选框和单选按钮不同，当用户不期望提交数据时，优先使用开关。

状态

当用户将开关滑块 (1) 滑动到轨道 (2) 的另一侧且开关状态发生变化时，表示已成功切换。

展示 FormToggle 状态的示意图

文本标签

开关应带有清晰的行内标签，以便用户确切知道该开关控制哪个选项，以及该选项是启用还是禁用状态。

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

行为

当用户切换开关时，其对应的操作会立即生效。

开发指南

使用示例

import { useState } from 'react';
import { FormToggle } from '@wordpress/components';

const MyFormToggle = () => {
    const [ isChecked, setChecked ] = useState( true );

    return (
        <FormToggle
            checked={ isChecked }
            onChange={ () => setChecked( ( state ) => ! state ) }
        />
    );
};

属性 (Props)

该组件接受以下属性：

checked: boolean

如果 checked 为 true，则开关处于选中状态。如果 checked 为 false，则开关未选中。
如果未传递值，则开关默认为未选中状态。

是否必需：否

disabled: boolean

如果 disabled 为 true，则开关将被禁用并应用相应的样式。

是否必需：否

onChange: ( event: ChangeEvent<HTMLInputElement> ) => void

当点击开关时调用的回调函数。

是否必需：是

表单切换