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
disabled	disabled	boolean	false	Whether or not the radio is disabled.
value	value	string	'on'	The element value to use in form submission when checked.
checked	checked	boolean	undefined
name		string	undefined
form		HTMLFormElement	undefined
labels		NodeList	undefined

Events

Event	Description
input	Dispatched when the value changes from user interaction.
change	Dispatched when the value changes from user interaction.