Radio button

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

A list of items with radio buttons and one selected.

Interactive Demo

View interactive demo inline.

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.

<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

Link to “Label”

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.

Accessibility

Link to “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.

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

Theming

Link to “Theming”

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

Tokens

Link to “Tokens”

Token	Default value
`--md-radio-icon-color`	`--md-sys-color-on-surface-variant`
`--md-radio-selected-icon-color`	`--md-sys-color-primary`
`--md-radio-icon-size`	`20px`

All tokens

Example

Link to “Example”

<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

Link to “API”

MdRadio `<md-radio>`

Link to “MdRadio <md-radio>”

Properties

Link to “Properties”

Property	Attribute	Type	Default	Description
`required`	`required`	`boolean`	`false`	Whether or not the radio is required. If any radio is required in a group, all radios are implicitly required.
`value`	`value`	`string`	`'on'`	The element value to use in form submission when checked.
`checked`	`checked`	`boolean`	`undefined`
`disabled`		`boolean`	`undefined`
`name`		`string`	`undefined`

Methods

Link to “Methods”

Method	Parameters	Returns	Description
`formResetCallback`	None	`void`
`formStateRestoreCallback`	`state`	`void`

Events

Link to “Events”

Event	Type	Bubbles	Composed	Description
`input`	`InputEvent`	Yes	No	Dispatched when the value changes from user interaction.
`change`	`Event`	Yes	Yes	Dispatched when the value changes from user interaction.