Office UI Fabric のチェック ボックス コンポーネント

チェック ボックスは、ユーザーがアドインのオプションをオンまたはオフにできる UI 要素です。チェック ボックスを使用すると、ユーザーがオプションを選択できます。 さらに、チェック ボックスは関連するコントロールとペアにすることもできます。 チェック ボックスをオンまたはオフにすると、関連するコントロールの動作が変更されます。 たとえば、関連するコントロールの状態を表示または非表示に切り替えます。

例:作業ウィンドウ内のチェック ボックス


チェック ボックスが表示された画像


ベスト プラクティス

するべきこと してはいけないこと
チェック ボックスを使用して、状態を示します。

チェック ボックスでするべきことの例
アクションの表示や指示にチェック ボックスを使用しないでください。

チェック ボックスでしてはいけないことの例
ユーザーが複数のオプションを選択できる場合は、複数のチェック ボックスを使用します。オプションは相互排他的ではありません。 ユーザーが 1 つのオプションしか選択できない場合は、チェック ボックスを使用しないでください。 1 つのオプションだけを選択する必要がある場合は、ラジオ ボタンを使用します。
いくつかのチェック ボックスをグループ化している場合、ユーザーはオプションの任意の組み合わせを選択できます。 2 つのグループのチェック ボックスを隣り合わせで配置しないでください。 2 つのグループはラベルを使用して区切ります。
セカンダリ設定には 1 つのチェック ボックスを使用します。 たとえば、[Remember me?] (このアカウントを記憶する) チェック ボックスは、サインイン シナリオで使用されるセカンダリ設定です。 チェック ボックスを使用して設定をオンまたはオフにしないでください。 オンとオフを切り替えるには、切り替えを使用します。

バリアント

バリエーション 説明
未制御のチェック ボックス 既定のチェック ボックスの状態として使用します。 未制御のチェック ボックスの画像
既定でチェックが true になっている未制御のチェック ボックス チェック ボックスのインスタンスが独自の状態を保持する場合に使用します 既定でチェックが true になっている未制御のチェック ボックスの画像
既定でチェックが true になっている無効な未制御のチェック ボックス チェック ボックスが無効にされた状態です。 既定でチェックが true になっている無効な未制御のチェック ボックスの画像
制御されたチェック ボックス このチェック ボックスのチェックされた状態は、UI の別の場所で決定されます。 このシナリオでは、onChange イベントおよび UI の再レンダリングによって正しい値がチェック ボックスに渡されます。 制御されたチェック ボックスの画像

実装

詳細については、「チェック ボックス」と「Fabric React のコード サンプルの使用にあたって」を参照してください。

その他のリソース