@material/radio
Advanced tools
Changelog
14.0.0 (2022-04-27)
unset is unsupported in IE. (f460e23)validateTooltipWithCaretDistances method. (3e30054)theme-styles mixin... the value being retreived from the $theme map and css property name was swapped. The mixin would request font-size/font-weight/letter-spacing from the $theme map (which expects size/weight/tracking)... so these values would always be null. (32b3913)attachTo. (05db65e)showTimeout is not set (indicating that this tooltip is about to be re-shown). (6ca8b8f)minRange param to range sliders to request a minimum gap between the two thumbs. (8fffcb5)valueToAriaValueTextFn and valueToValueIndicatorTextFn functions are called for. (b6510c8)PiperOrigin-RevId: 444830518
PiperOrigin-RevId: 419837612
Readme
Selection controls allow the user to select options.
Use radio buttons to:
Contents
Radio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.
npm install @material/radio
@use "@material/radio/styles";
@use "@material/form-field";
@include form-field.core-styles;
Note: The form field styles are only required when the radio button is used with the form field.
The radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating MDCRadio on the mdc-radio element. To activate the ripple effect upon interacting with the label, you must also instantiate MDCFormField on the mdc-form-field element and set the MDCRadio instance as its input.
import {MDCFormField} from '@material/form-field';
import {MDCRadio} from '@material/radio';
const radio = new MDCRadio(document.querySelector('.mdc-radio'));
const formField = new MDCFormField(document.querySelector('.mdc-form-field'));
formField.input = radio;
Note: See Importing the JS component for more information on how to import JavaScript.
Material Design spec advises that touch targets should be at least 48px x 48px.
To meet this requirement, add the mdc-radio--touch class to your radio as follows:
<div class="mdc-touch-target-wrapper">
<div class="mdc-radio mdc-radio--touch">
<input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
<div class="mdc-radio__ripple"></div>
<div class="mdc-radio__focus-ring"></div>
</div>
</div>
Note that the outer mdc-touch-target-wrapper element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).
The mdc-radio__focus-ring element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.
We recommend using MDC Radio with MDC Form Field for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
<div class="mdc-radio__ripple"></div>
<div class="mdc-radio__focus-ring"></div>
</div>
<label for="radio-1">Radio 1</label>
</div>
Radio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.
To disable a radio button, add the mdc-radio--disabled class to the root element and set the disabled attribute on the <input> element.
Disabled radio buttons cannot be interacted with and have no visual interaction effect.
<div class="mdc-form-field">
<div class="mdc-radio mdc-radio--disabled">
<input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" disabled>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
<div class="mdc-radio__ripple"></div>
<div class="mdc-radio__focus-ring"></div>
</div>
<label for="radio-1">Radio 1</label>
</div>
MDC Radio uses MDC Theme's secondary color by default. Use the following mixins to customize it.
| Mixin | Description |
|---|---|
unchecked-stroke-color($color) | Sets the stroke color of an unchecked, enabled radio button |
checked-stroke-color($color) | Sets the stroke color of a checked, enabled radio button |
ink-color($color) | Sets the ink color of an enabled radio button |
disabled-unchecked-stroke-color($color) | Sets the stroke color of an unchecked, disabled radio button |
disabled-checked-stroke-color($color) | Sets the stroke color of a checked, disabled radio button |
disabled-ink-color($color) | Sets the ink color of a disabled radio button |
focus-indicator-color($color) | Sets the color of the focus indicator |
touch-target($size, $ripple-size) | Sets radio touch target size which can be more than the ripple size. Param $ripple-size is required for custom ripple size, defaults to $ripple-size. |
ripple-size($size) | Sets custom ripple size of radio. |
density($density-scale) | Sets density scale for radio. Supported density scale values are -3, -2, -1 and 0 (default). |
MDCRadio properties and methods| Property | Value Type | Description |
|---|---|---|
checked | Boolean | Setter/getter for the radio's checked state |
disabled | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's setDisabled method |
value | String | Setter/getter for the radio's value |
If you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.
MDCRadioAdapter| Method Signature | Description |
|---|---|
setNativeControlDisabled(disabled: boolean) => void | Sets the input's disabled property to the given value |
addClass(className: string) => void | Adds a class to the root element |
removeClass(className: string) => void | Removes a class from the root element |
MDCRadioFoundation| Method Signature | Description |
|---|---|
setDisabled(disabled: boolean) => void | Sets the disabled value of the native control |
FAQs
The Material Components for the web radio component
The npm package @material/radio receives a total of 910,862 weekly downloads. As such, @material/radio popularity was classified as popular.
We found that @material/radio demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.