import RadioButton from 'primevue/radiobutton';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/radiobutton/radiobutton.min.js"></script>
Two-way value binding is defined using the standard v-model directive.
<RadioButton name="city" value="Chicago" v-model="city" />
<RadioButton name="city" value="Los Angeles" v-model="city" />
export default {
data() {
return {
city: null
}
}
}
As model is two-way binding enabled, giving a default value to the model is enough to display a radio button as checked by default.
export default {
data() {
return {
city: 'Chicago'
}
}
}
Any valid attribute is passed to the root element implicitly, extended properties are as follows;
| Name | Type | Default | Description |
|---|---|---|---|
| value | any | null | Value of the checkbox. |
| modelValue | any | null | Value binding of the checkbox. |
| name | string | null | Name of the input element. |
| disabled | boolean | false | When present, it specifies that the element should be disabled. |
| inputId | string | null | Style class of the component input field. |
| inputClass | string | null | Style class of the input field. |
| inputStyle | any | null | Inline style of the input field. |
| inputProps | object | null | Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component. |
| aria-label | string | null | Defines a string value that labels an interactive element. |
| aria-labelledby | string | null | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
Any valid event such as focus and blur.
| Name | Parameters | Description |
|---|---|---|
| click | - | Callback to invoke on radio button click. |
| change | - | Callback to invoke on radio button value change. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-radiobutton | Container element |
| p-radiobutton-box | Container of icon. |
| p-radiobutton-icon | Icon element. |
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 arrow up arrow | Moves focus to the previous radio button, if there is none then last radio button receives the focus. |
| right arrow down 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. |
None.