FormToggle

デザインガイドライン

使用法

トグルを使用するタイミング

ユーザーに次のことをさせたい場合はトグルを使用します：

• 単一のオプションをオンまたはオフに切り替える。
• 何かを即座に有効または無効にする。

するべきこと

オプションをオンまたはオフに切り替えるためにトグルを使用します。

しないべきこと

オンとオフを切り替える設定にラジオボタンを使用しないでください。

トグルは、ユーザーがデータを送信することを期待していない場合、チェックボックスやラジオボタンのように好まれます。

状態

ユーザーがトグルのスライダー（1）をトラック（2）の反対側にスライドさせ、トグルの状態が変わると、正常にトグルが切り替えられたことになります。

テキストラベル

トグルには明確なインラインラベルが必要です。これにより、ユーザーはトグルが制御するオプションが何であるか、オプションが有効か無効かを正確に知ることができます。

トグル要素自体に「オン」や「オフ」などのテキストを含めないでください。トグルだけで状態を伝えるのに十分であるべきです。

動作

ユーザーがトグルを切り替えると、その対応するアクションが即座に実行されます。

開発ガイドライン

使用法

import { useState } from 'react';
import { FormToggle } from '@wordpress/components';
const MyFormToggle = () => {
   const [ isChecked, setChecked ] = useState( true );
   return (
   <FormToggle
   checked={ isChecked }
   onChange={ () => setChecked( ( state ) => ! state ) }
   />
   );
};

プロパティ

コンポーネントは次のプロパティを受け入れます：

checked: boolean

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

値が渡されない場合、トグルはチェックされません。

• 必須：いいえ

disabled: boolean

disabledがtrueの場合、トグルは無効になり、適切なスタイルが適用されます。

• 必須：いいえ

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

トグルがクリックされたときに呼び出されるコールバック関数です。

• 必須：はい
  

関連コンポーネント

• セットから1つのオプションを選択し、すべての利用可能なオプションを一度に表示したい場合は、Radioコンポーネントを使用します。
• セットから1つまたは複数のアイテムを選択するには、CheckboxControlコンポーネントを使用します。
• ラベルとヘルプテキストを持つトグルを表示するには、ToggleControlコンポーネントを使用します。