RadioButton

RadioButtonは、テーマを備えた標準のラジオボタン要素の拡張機能です。

インポート#


import { RadioButton } from 'primereact/radiobutton';
         

グループ#

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


<div className="flex flex-wrap gap-3">
    <div className="flex align-items-center">
        <RadioButton inputId="ingredient1" name="pizza" value="Cheese" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Cheese'} />
        <label htmlFor="ingredient1" className="ml-2">Cheese</label>
    </div>
    <div className="flex align-items-center">
        <RadioButton inputId="ingredient2" name="pizza" value="Mushroom" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Mushroom'} />
        <label htmlFor="ingredient2" className="ml-2">Mushroom</label>
    </div>
    <div className="flex align-items-center">
        <RadioButton inputId="ingredient3" name="pizza" value="Pepper" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Pepper'} />
        <label htmlFor="ingredient3" className="ml-2">Pepper</label>
    </div>
    <div className="flex align-items-center">
        <RadioButton inputId="ingredient4" name="pizza" value="Onion" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Onion'} />
        <label htmlFor="ingredient4" className="ml-2">Onion</label>
    </div>
</div>
         

動的#

RadioButtonは、値のリストを使用して生成できます。


{categories.map((category) => {
    return (
        <div key={category.key} className="flex align-items-center">
            <RadioButton inputId={category.key} name="category" value={category} onChange={(e) => setSelectedCategory(e.value)} checked={selectedCategory.key === category.key} />
            <label htmlFor={category.key} className="ml-2">{category.name}</label>
        </div>
    );
})}
         

塗りつぶし#

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


<RadioButton variant="filled" />
         

無効#

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


<RadioButton invalid/>
         

無効化#

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


<RadioButton checked disabled></RadioButton>
         

アクセシビリティ#

スクリーンリーダー

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


<label htmlFor="rb1">One</label>
<RadioButton inputId="rb1" />

<span id="rb2">Two</span>
<RadioButton aria-labelledby="rb2" />

<RadioButton aria-label="Three" />
     

キーボードサポート

キー機能
tabチェックされているラジオボタンにフォーカスを移動します。グループ内にない場合は、最初のラジオボタンがフォーカスを受け取ります。
左矢印上矢印前のラジオボタンにフォーカスを移動します。ない場合は、最後のラジオボタンがフォーカスを受け取ります。
右矢印下矢印次のラジオボタンにフォーカスを移動します。ない場合は、最初のラジオボタンがフォーカスを受け取ります。
spaceフォーカスされたラジオボタンがチェックされていない場合は、状態をチェック済みに変更します。
                PrimeReact 10.8.3 by PrimeTek