radio.md

Radio button

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

• Design article
• API Documentation
• Source code

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

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>

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.

<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

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

<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

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

Method	Parameters	Returns	Description
formResetCallback	None	void
formStateRestoreCallback	state	void

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.