MultiStateCheckbox

MultiStateCheckboxは、指定されたオプションから状態を選択するために使用されます。

インポート#


import { MultiStateCheckbox } from 'primereact/multistatecheckbox';

基本#

MultiStateCheckboxは、valueおよびonChangeプロパティと、optionコレクションとともに、制御された入力として使用されます。optionValueフィールドは各オプションの値を参照し、省略するとオブジェクト自体がオプションの値になります。表示するアイコンは、optionIconプロパティから取得され、デフォルトではiconプロパティ名になります。

public


<MultiStateCheckbox value={value} onChange={(e) => setValue(e.value)} options={options} optionValue="value" />

無効#

無効な状態のスタイルは、検証に失敗したことを示すためにp-invalidクラスを使用して追加されます。


<MultiStateCheckbox className="p-invalid" />

無効化#

disabledが存在する場合、要素を編集およびフォーカスすることはできません。


<MultiStateCheckbox disabled />

アクセシビリティ#

スクリーンリーダー

MultiStateCheckboxコンポーネントは、checkboxロールを持つ要素を使用します。コンポーネントを説明する値は、aria-labelledbyまたはaria-labelプロパティのいずれかで提供できます。コンポーネントは、表示される値を読み上げるためにスクリーンリーダーのみに表示されるaria-live属性を持つ要素を追加します。読み上げる値は、定義されていない場合はoptionValueがデフォルトであるoptionLabelプロパティで定義されます。一方、チェックされていない状態のラベルは、ロケールAPIのariaプロパティのnullLabelキーから取得されます。これは、コンポーネントの設計とWCAG仕様の間に1対1のマッピングがないため、カスタムアクセシビリティ実装の例です。


<span id="chkbox1">Access Type</span>
<MultiStateCheckbox aria-labelledby="chkbox1" />

<TriStateCheckbox aria-label="Access Type" />

キーボードサポート

キー	機能
tab	チェックボックスにフォーカスを移動します。
space	値を切り替えます。