トリステートチェックボックス

TriStateCheckboxは、追加の状態を持つチェックボックスコンポーネントの拡張です。

インポート#


import { TriStateCheckbox } from 'primereact/tristatecheckbox';
         

基本#

TriStateCheckboxは、`value`プロパティと`onChange`プロパティを使用して制御された入力として使用されます。

未選択

<TriStateCheckbox value={value} onChange={(e) => setValue(e.value)} />
         

塗りつぶし#

`variant`プロパティを`filled`として指定すると、デフォルトの`outlined`スタイルよりも視覚的な強調表示が強いコンポーネントが表示されます。

未選択

<TriStateCheckbox variant="filled" value={value} onChange={(e) => setValue(e.value)} />
         

無効#

`invalid`プロパティを使用して無効状態を表示し、検証エラーを示します。フォーム検証ライブラリと統合する際にこのスタイルを使用できます。

未選択

<TriStateCheckbox invalid value={value} onChange={(e) => setValue(e.value)} />
         

無効#

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

未選択

<TriStateCheckbox disabled />
         

アクセシビリティ#

スクリーンリーダー

TriStateCheckboxコンポーネントは、`checkbox`ロールを持つ要素を使用します。コンポーネントの説明は、`aria-labelledby`または`aria-label`プロパティで指定できます。コンポーネントは、スクリーンリーダーでのみ見える`aria-live`属性を持つ要素を追加して、表示されている値を読み上げます。読み上げる値は、ロケールAPIの`aria`プロパティの`trueLabel`、`falseLabel`、`nullLabel`キーで定義されます。これは、コンポーネントのデザインとWCAG仕様の間に一対一の対応がないため、カスタムアクセシビリティ実装の一例です。


<span id="chkbox1">Remember Me</span>
<TriStateCheckbox aria-labelledby="chkbox1" />

<TriStateCheckbox aria-label="Remember Me" />
     

キーボードサポート

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