Skip to content
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.
Radio button has loaded