Radio button

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

A list of items with radio buttons and one selected.

View interactive demo inline.

Open interactive demo in new tab.

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.

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

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

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

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

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.

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

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

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

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
<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>
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
MethodParametersReturnsDescription
formResetCallbackNonevoid
formStateRestoreCallbackstatevoid
EventTypeBubblesComposedDescription
inputInputEventYesNoDispatched when the value changes from user interaction.
changeEventYesYesDispatched when the value changes from user interaction.
About
IntroductionQuick StartRoadmapSupportBundle Sizes
Theming
Material ThemingColorTypographyShape
Components
ButtonsCheckboxChipsDialogsFloating action button (FAB)Icon ButtonsListsMenusProgress indicatorsRadioRippleSelectSlidersSwitchTabsText field