复选框控件

复选框允许用户从一组项目中选择一个或多个项目。

设计规范

用法

何时使用复选框

当您需要用户执行以下操作时，请使用复选框：

• 从列表中选择一个或多个项目。
• 打开包含子选择的列表。

应当
当用户可以从列表中多选项目时，请使用复选框。它们允许用户选择多个项目。

不应当
如果列表包含多个选项，请不要使用开关（toggles）。请使用复选框——它们占用更少的空间。

复选框可用于打开包含子选择的列表。

父级和子级复选框

复选框可以具有父子关系，次要选项嵌套在主要选项之下。

当父级复选框被选中时，所有子级复选框均被选中。当父级复选框被取消选中时，所有子级复选框均被取消选中。

如果仅选中了少数几个子级复选框，则父级复选框将变为混合状态（indeterminate）复选框。

开发规范

用法

渲染一个作者复选框：

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

const MyCheckboxControl = () => {
    const [ isChecked, setChecked ] = useState( true );
    return (
        <CheckboxControl
            label="Is author"
            help="Is the user a author or not?"
            checked={ isChecked }
            onChange={ setChecked }
        />
    );
};

属性（Props）

组件接受的属性集将在下面指定。
未包含在此集中的属性将被应用于输入元素。

label: string

输入字段的标签，显示在复选框的侧面。
该属性将作为内容渲染为 label 元素。
如果未传递任何属性，则渲染空标签。

• 必填：否

help: string|Element

如果添加了此属性，将使用 help 属性作为内容生成帮助文本。

• 必填：否

checked: boolean

如果 checked 为 true，则复选框将被选中。如果 checked 为 false，则复选框将被取消选中。
如果未传递值，则复选框将被取消选中。

• 必填：否

onChange: function

接收选中状态（布尔值）作为输入的函数。

• 必填：是

indeterminate: boolean

如果 indeterminate 为 true，则复选框的状态将为不确定状态。

• 必填：否

相关组件

• 要从一组选项中选择一个选项，并且希望同时显示所有可用选项，请使用 RadioControl 组件。
• 要切换单个设置的开启或关闭状态，请使用 FormToggle 组件。