Checkbox

チェックボックスは、テーマを備えた標準的なチェックボックス要素の拡張です。

インポート#


import { Checkbox } from 'primereact/checkbox';
         

基本#

チェックボックスは、checkedとonChangeプロパティを持つ制御された入力として使用されます。


<Checkbox onChange={e => setChecked(e.checked)} checked={checked}></Checkbox>
         

グループ#

複数のチェックボックスをグループ化できます。


<div className="flex flex-wrap justify-content-center gap-3">
    <div className="flex align-items-center">
        <Checkbox inputId="ingredient1" name="pizza" value="Cheese" onChange={onIngredientsChange} checked={ingredients.includes('Cheese')} />
        <label htmlFor="ingredient1" className="ml-2">Cheese</label>
    </div>
    <div className="flex align-items-center">
        <Checkbox inputId="ingredient2" name="pizza" value="Mushroom" onChange={onIngredientsChange} checked={ingredients.includes('Mushroom')} />
        <label htmlFor="ingredient2" className="ml-2">Mushroom</label>
    </div>
    <div className="flex align-items-center">
        <Checkbox inputId="ingredient3" name="pizza" value="Pepper" onChange={onIngredientsChange} checked={ingredients.includes('Pepper')} />
        <label htmlFor="ingredient3" className="ml-2">Pepper</label>
    </div>
    <div className="flex align-items-center">
        <Checkbox inputId="ingredient4" name="pizza" value="Onion" onChange={onIngredientsChange} checked={ingredients.includes('Onion')} />
        <label htmlFor="ingredient4" className="ml-2">Onion</label>
    </div>
</div>
         

動的#

チェックボックスは、値のリストを使用して生成できます。


{categories.map((category) => {
    return (
        <div key={category.key} className="flex align-items-center">
            <Checkbox inputId={category.key} name="category" value={category} onChange={onCategoryChange} checked={selectedCategories.some((item) => item.key === category.key)} />
            <label htmlFor={category.key} className="ml-2">{category.name}</label>
        </div>
    );
})}
         

無効#

無効な状態は、検証の失敗を示すためにinvalidプロップを使用して表示されます。フォーム検証ライブラリと統合する際に、このスタイルを使用できます。


<Checkbox invalid={!checked} onChange={(e) => setChecked(e.checked)} checked={checked}></Checkbox>
         

塗りつぶし#

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


<Checkbox onChange={e => setChecked(e.checked)} checked={checked}></Checkbox>
         

無効化#

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


<Checkbox checked disabled></Checkbox>
         

アクセシビリティ#

スクリーンリーダー

チェックボックスコンポーネントは、スクリーンリーダーにのみ表示される、内部的に非表示のネイティブチェックボックス要素を使用します。コンポーネントを説明する値は、inputIdプロップと組み合わせたlabelタグを使用するか、 aria-labelledby、aria-labelプロップを使用して提供できます。


<label htmlFor="chkbox1">Remember Me</label>
<Checkbox inputId="chkbox1" />

<span id="chkbox2">Remember Me</span>
<Checkbox aria-labelledby="chkbox2" />

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

キーボードサポート

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