ラジオボタン

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

インポート # 


import RadioButton from 'primevue/radiobutton';

グループ #

双方向バインディングはv-modelを使用して定義されます。


<div class="flex flex-wrap gap-4">
    <div class="flex items-center">
        <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
        <label for="ingredient1" class="ml-2">Cheese</label>
    </div>
    <div class="flex items-center">
        <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
        <label for="ingredient2" class="ml-2">Mushroom</label>
    </div>
    <div class="flex items-center">
        <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
        <label for="ingredient3" class="ml-2">Pepper</label>
    </div>
    <div class="flex items-center">
        <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
        <label for="ingredient4" class="ml-2">Onion</label>
    </div>
</div>

動的 #

値のリストを使用してラジオボタンを生成できます。


<div v-for="category in categories" :key="category.key" class="flex items-center">
    <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
    <label :for="category.key" class="ml-2">{{ category.name }}</label>
</div>

塗りつぶし #

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


<RadioButton v-model="value" value="1" variant="filled" />

無効 #

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


<RadioButton v-model="value" value="1" :invalid="value === null" />

無効 #

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


<RadioButton v-model="value" :value="1" disabled />
<RadioButton v-model="value" :value="2" disabled />

アクセシビリティ #

スクリーンリーダー

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


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

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

<RadioButton aria-label="Three" />

キーボードサポート

キー機能
tabフォーカスをオンになっているラジオボタンに移動します。グループ内にオンになっていない場合、最初のラジオボタンがフォーカスを受け取ります。
左矢印上矢印フォーカスを前のラジオボタンに移動します。存在しない場合、最後のラジオボタンがフォーカスを受け取ります。
右矢印下矢印フォーカスを次のラジオボタンに移動します。存在しない場合、最初のラジオボタンがフォーカスを受け取ります。
spaceフォーカスされているラジオボタンがオフの場合、状態をオンに変更します。
PrimeTekによるVue 3上のPrimeVue 4.0.7 PrimeTek