CheckboxControl

デザインガイドライン

使用法

チェックボックスを使用するタイミング

ユーザーに次のことをしてもらいたい場合は、チェックボックスを使用します：

• リストから1つまたは複数のアイテムを選択する。
• サブ選択を含むリストを開く。

するべきこと

ユーザーがリストから複数のアイテムを選択できる場合は、チェックボックスを使用します。これにより、ユーザーは複数のアイテムを選択できます。

しないべきこと

複数のオプションからなるリストの場合はトグルを使用しないでください。チェックボックスを使用してください — それらはスペースを取らずに済みます。

チェックボックスは、サブ選択を含むリストを開くためにも使用できます。

親子チェックボックス

チェックボックスは親子関係を持つことができ、二次オプションが一次オプションの下にネストされます。

親チェックボックスがチェックされている場合、すべての子チェックボックスがチェックされます。親チェックボックスがチェックされていない場合、すべての子チェックボックスがチェックされません。

子チェックボックスがいくつかだけチェックされている場合、親チェックボックスは混合チェックボックスになります。

開発ガイドライン

使用法

著者チェックボックスをレンダリングします：

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

プロパティ

コンポーネントが受け入れるプロパティのセットは以下に示します。

このセットに含まれていないプロパティは、入力要素に適用されます。

label: string

チェックボックスの横に表示される入力フィールドのラベル。

プロパティはラベル要素の内容としてレンダリングされます。

プロパティが渡されない場合、空のラベルがレンダリングされます。

• 必須: いいえ

help: string|Element

このプロパティが追加されると、ヘルププロパティを内容として使用してヘルプテキストが生成されます。

• 必須: いいえ

checked: boolean

checkedがtrueの場合、チェックボックスはチェックされます。checkedがfalseの場合、チェックボックスはチェックされません。

値が渡されない場合、チェックボックスはチェックされません。

• 必須: いいえ

onChange: function

チェック状態（boolean）を入力として受け取る関数。

• 必須: はい

indeterminate: boolean

indeterminateがtrueの場合、チェックボックスの状態は不確定になります。

• 必須: いいえ

__nextHasNoMarginBottom: boolean

将来のバージョンでデフォルトになる新しいマージンなしスタイルを選択し始めます。

• 必須: いいえ
• デフォルト: false
  

関連コンポーネント

• セットから1つのオプションを選択し、すべての利用可能なオプションを一度に表示したい場合は、RadioControlコンポーネントを使用します。
• 単一の設定をオンまたはオフに切り替えるには、FormToggleコンポーネントを使用します。