Radio button
Radio buttons let people select one option from a set of options.
Interactive Demo
Link to “Interactive Demo”View interactive demo inline.
Open interactive demo in new tab.
Usage
Link to “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 |
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>MdRadio <md-radio>
Link to “MdRadio <md-radio>” Properties
Link to “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
Link to “Events”| Event | Description |
|---|---|
input | Dispatched when the value changes from user interaction. |
change | Dispatched when the value changes from user interaction. |