Codex
On this page

Radio ​

A binary input, part of a single-select group.

Typical use will involve using v-for to loop through an array of items and output a Radio component for each one. Each Radio will have the same v-model binding and name prop, but different inputValue props and label content.

The v-model value is the inputValue of the Radio that is currently on.

Demos ​

Radio group ​

Radio group value: radio-2

NameValue
View 
Reading direction

Inline radios ​

Form field ​

A single radio or group of radios can be wrapped in the Field component to add features like a semantic label, description and help text, validation messages, and more. See the Field page for more information.

When building a Radio field, always set isFieldset to true to ensure proper accessibility support.

Notifications Choose how often you'd like to receive notifications
Note that you can update this preference later

Usage ​

Props ​

Prop nameDescriptionTypeDefault
modelValueValue of the currently selected radio.

Provided by v-model binding in the parent component.		string|number|boolean''
inputValueHTML "value" attribute to assign to the input.

Required for input groups.		string|number|booleanfalse
nameHTML "name" attribute to assign to the input.

Required for input groups		string''
disabledWhether the disabled attribute should be added to the input.booleanfalse
inlineWhether the component should display inline.

By default, display: block is set and a margin exists between sibling components, for a stacked layout.		booleanfalse

Events ​

Event namePropertiesDescription
update:modelValuemodelValue string|number|boolean - The new model valueEmitted when modelValue changes.

Slots ​

NameDescriptionBindings
defaultInput label content

CSS-only version ​

Markup structure ​

Radio group ​

Native attributes of the <input> element can be used. For example:

  • Add the checked attribute to the <input> element if it should be selected initially.
  • Add the disabled attribute to the <input> element if it should be disabled.

Inline radios ​

Add the cdx-radio--inline class to the root element to get an inline layout.