RadioButton is an extension to standard radio button element with theming.
import RadioButton from 'primevue/radiobutton';
Two-way value binding is defined using v-model.
<div class="flex flex-wrap gap-3">
<div class="flex align-items-center">
<RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label>
</div>
</div>
RadioButtons can be generated using a list of values.
<div v-for="category in categories" :key="category.key" class="flex align-items-center">
<RadioButton v-model="selectedCategory" :inputId="category.key" name="pizza" :value="category.name" />
<label :for="category.key" class="ml-2">{{ category.name }}</label>
</div>
Invalid state style is added using the p-invalid class to indicate a failed validation.
<RadioButton class="p-invalid" />
When disabled is present, the element cannot be edited and focused.
<RadioButton v-model="checked" disabled :value="checked" />
Compatibility with popular Vue form libraries.
VeeValidate is a popular library for handling forms in Vue.
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<div>Please choose your ingredient.</div>
<div class="flex flex-wrap gap-3">
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient1" name="pizza2" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient2" name="pizza2" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient3" name="pizza2" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="value" inputId="ingredient4" name="pizza2" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label>
</div>
</div>
<small id="text-error" class="p-error">{{ errorMessage || ' ' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.
<label for="rb1">One</label>
<RadioButton inputId="rb1" />
<span id="rb2">Two</span>
<RadioButton aria-labelledby="rb2" />
<RadioButton aria-label="Three" />
| Key | Function |
|---|---|
| tab | Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus. |
| left arrowup arrow | Moves focus to the previous radio button, if there is none then last radio button receives the focus. |
| right arrowdown arrow | Moves focus to the next radio button, if there is none then first radio button receives the focus. |
| space | If the focused radio button is unchecked, changes the state to checked. |