RadioButton

RadioButton is an extension to standard radio button element with theming.

Import #


import RadioButton from 'primevue/radiobutton';

Group #

Two-way value binding is defined using v-model.

Cheese

Mushroom

Pepper

Onion


<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>

Dynamic #

RadioButtons can be generated using a list of values.

Accounting

Marketing

Production

Research


<div v-for="category in categories" :key="category.key" class="flex align-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>

Filled #

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.


<RadioButton v-model="checked" variant="filled" binary />

Invalid #

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.


<RadioButton invalid binary />

Disabled #

When disabled is present, the element cannot be edited and focused.


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

Accessibility #

Screen Reader

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" />

Keyboard Support

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.

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.
binary	boolean	null	Allows to select a boolean value.
invalid	boolean	false	When present, it specifies that the component should have invalid state style.
disabled	boolean	false	When present, it specifies that the component should be disabled.
variant	"filled" \| "outlined"	outlined	Specifies the input variant of the component.
readonly	boolean	null	When present, it specifies that an input field is read-only.
tabindex	number	null	Index of the element in tabbing order.
inputId	string	null	Identifier of the underlying input element.
inputStyle	object	null	Inline style of the input field.
inputClass	string \| object	null	Style class of the input field.
ariaLabelledby	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
ariaLabel	string	null	Establishes a string value that labels the component.
pt	PassThrough<RadioButtonPassThroughOptions	null	Used to pass attributes to DOM elements inside the component.
ptOptions	PassThroughOptions	null	Used to configure passthrough(pt) options of the component.
unstyled	boolean	false	When enabled, it removes component related styles in the core.

name	parameters	returnType	description
update:modelValue	value: any	void	Emitted when the value changes.
change	event: Event	void	Callback to invoke on radio button value change.
focus	event: Event	void	Callback to invoke when the component receives focus.
blur	event: Event	void	Callback to invoke when the component loses focus.

name	type	default	description
instance	any	null	Defines instance.
props	RadioButtonProps	null	Defines valid properties.
state	RadioButtonState	null	Defines current inline state.
context	RadioButtonContext	null	Defines current options.
attrs	any	null	Defines valid attributes.
parent	any	null	Defines parent options.
global	undefined \| object	null	Defines passthrough(pt) options in global config.

name	type	default	description
root	RadioButtonPassThroughOptionType	null	Used to pass attributes to the root's DOM element.
input	RadioButtonPassThroughOptionType	null	Used to pass attributes to the input's DOM element.
box	RadioButtonPassThroughOptionType	null	Used to pass attributes to the box's DOM element.
icon	RadioButtonPassThroughOptionType	null	Used to pass attributes to the icon's DOM element.
hooks	ComponentHooks	null	Used to manage all lifecycle hooks.

name	type	default	description
checked	boolean	false	Current checked state of the item as a boolean.
disabled	boolean	false	Current disabled state of the item as a boolean.

RadioButton

Import #

Group #

Dynamic #

Filled #

Invalid #

Disabled #

Accessibility #

Screen Reader

Keyboard Support

RadioButton API

RadioButton #

Props #

Emits #

Interfaces #

RadioButtonPassThroughMethodOptions #

RadioButtonPassThroughOptions #

RadioButtonPassThroughAttributes #

RadioButtonState #

RadioButtonContext #

Types #

RadioButtonPassThroughOptionType #