RadioButton 是標準單選按鈕元素的擴充，並具有主題功能。
import RadioButton from 'primevue/radiobutton';
RadioButton 與v-model屬性一起使用，以進行雙向值綁定。
<div class="flex flex-wrap gap-4">
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1">Cheese</label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2">Mushroom</label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3">Pepper</label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4">Onion</label>
</div>
</div>
RadioButton 與 PrimeVue 表單 程式庫無縫整合。
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
<div class="flex items-center gap-2">
<RadioButton inputId="cheese" value="Cheese" />
<label for="cheese">Cheese</label>
</div>
<div class="flex items-center gap-2">
<RadioButton inputId="mushroom" value="Mushroom" />
<label for="mushroom">Mushroom</label>
</div>
<div class="flex items-center gap-2">
<RadioButton inputId="pepper" value="Pepper" />
<label for="pepper">Pepper</label>
</div>
<div class="flex items-center gap-2">
<RadioButton inputId="onion" value="Onion" />
<label for="onion">Onion</label>
</div>
</RadioButtonGroup>
<Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
可以使用值列表產生單選按鈕。
<div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
<RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
<label :for="category.key">{{ category.name }}</label>
</div>
將 variant 屬性指定為 filled，以顯示元件，其視覺強調比預設的 outlined 樣式更高。
<RadioButton v-model="value" value="1" variant="filled" />
RadioButton 提供 small 和 large 尺寸，作為基本尺寸的替代方案。
<div class="flex flex-wrap gap-4">
<div class="flex items-center gap-2">
<RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
<label for="size_small" class="text-sm">Small</label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
<label for="size_normal">Normal</label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
<label for="size_large" class="text-lg">Large</label>
</div>
</div>
無效狀態會使用 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 | 將焦點移至已選取的單選按鈕，如果群組內沒有任何已選取的按鈕，則第一個單選按鈕會接收焦點。 |
| 左箭頭上箭頭 | 將焦點移至前一個單選按鈕，如果沒有前一個按鈕，則最後一個單選按鈕會接收焦點。 |
| 右箭頭下箭頭 | 將焦點移至下一個單選按鈕，如果沒有下一個按鈕，則第一個單選按鈕會接收焦點。 |
| 空白鍵 | 如果焦點單選按鈕未選取，則將狀態變更為已選取。 |