Vue.js

Appearance

On this page

Radio button ​

Radio buttons let people select one option from a set of options.

Usage ​

Radios behave like <input type="radio"> elements and form a group with the same name attribute. Only one radio can be selected in a group.

Radios can be pre-selected by adding a checked attribute.

Add a value to identify which radio is selected in a form.

html
<form>
  <md-radio name="animals" value="cats"></md-radio>
  <md-radio name="animals" value="dogs"></md-radio>
  <md-radio name="animals" value="birds" checked></md-radio>
</form>

Label ​

Associate a label with a radio using the <label> element.

html
<md-radio id="cats-radio" name="animals" value="cats"></md-radio>
<label for="cats-radio">Cats</label>

<md-radio id="dogs-radio" name="animals" value="dogs"></md-radio>
<label for="dogs-radio">Dogs</label>

Note: do not wrap radios inside of a <label>, which stops screen readers from correctly announcing the number of radios in a group.

Accessibility ​

Add an aria-label attribute to radios without labels or radios whose labels need to be more descriptive.

Place radios inside a role="radiogroup". Radio groups must display a label, either with aria-label or aria-labelledby.

html
<div role="radiogroup" aria-labelledby="group-title">
  <h3 id="group-title">Starting position</h3>
  <div>
    <md-radio id="first-radio" name="group" value="1"
        aria-label="First"></md-radio>
    <label for="first-radio">1st</label>
  </div>
  <div>
    <md-radio id="second-radio" name="group" value="2"
        aria-label="Second"></md-radio>
    <label for="second-radio">2nd</label>
  </div>
</div>

Note: radios are not automatically labelled by <label> elements and always need an aria-label. See b/294081528.

Theming ​

Radios support Material theming and can be customized in terms of color.

Tokens ​

TokenDefault value
--md-radio-icon-color--md-sys-color-on-surface-variant
--md-radio-selected-icon-color--md-sys-color-primary
--md-radio-icon-size20px

Example ​

html
<style>
:root {
  --md-sys-color-primary: #006A6A;
  --md-radio-icon-size: 16px;
}
</style>

<md-radio name="group"></md-radio>
<md-radio name="group" checked></md-radio>
<md-radio name="group"></md-radio>

API ​

MdRadio <md-radio> ​

Properties ​

PropertyAttributeTypeDefaultDescription
requiredrequiredbooleanfalseWhether or not the radio is required. If any radio is required in a group, all radios are implicitly required.
valuevaluestring'on'The element value to use in form submission when checked.
checkedcheckedbooleanundefined
disabledbooleanundefined
namestringundefined

Methods ​

MethodParametersReturnsDescription
formResetCallbackNonevoid
formStateRestoreCallbackstatevoid

Events ​

EventTypeBubblesComposedDescription
inputInputEventYesNoDispatched when the value changes from user interaction.
changeEventYesYesDispatched when the value changes from user interaction.

Edit this page on GitHub