Selection controls: radio buttons
Selection controls allow the user to select options.
Use radio buttons to:
- Select a single option from a list
- Expose all available options
- If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.
Using radio buttons
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.
Installing radio buttons
npm install @material/radio
@use "@material/radio";@use "@material/form-field";
Note: The form field styles are only required when the radio button is used with the form field.
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
;;const radio = document;const formField = document;formFieldinput = radio;
Making radio buttons accessible
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:
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).
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.
Radio button example
Radio button states
Radio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.
Disabled radio buttons
To disable a radio button, add the
mdc-radio--disabled class to the root element and set the
disabled attribute on the
Disabled radio buttons cannot be interacted with and have no visual interaction effect.
MDC Radio uses MDC Theme's
secondary color by default. Use the following mixins to customize it.
||Sets the stroke color of an unchecked, enabled radio button|
||Sets the stroke color of a checked, enabled radio button|
||Sets the ink color of an enabled radio button|
||Sets the stroke color of an unchecked, disabled radio button|
||Sets the stroke color of a checked, disabled radio button|
||Sets the ink color of a disabled radio button|
||Sets the color of the focus indicator|
||Sets radio touch target size which can be more than the ripple size. Param
||Sets custom ripple size of radio.|
||Sets density scale for radio. Supported density scale values are
MDCRadio properties and methods
||Boolean||Setter/getter for the radio's checked state|
||Boolean||Setter/getter for the radio's disabled state. Setter proxies to foundation's
||String||Setter/getter for the radio's value|
Usage within web frameworks
||Sets the input's
||Adds a class to the root element|
||Removes a class from the root element|
||Sets the disabled value of the native control|