Preview

Installation

To import just the component styles, copy the following into your project’s styles.css file:

/* Core Styles */
@import url('https://kherrick.github.io/material-design-lite/css/core.css');
/* Material Icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
/* Component Styles */
@import url('https://kherrick.github.io/material-design-lite/css/components/radio-button/style.css');

Usage

Start with a input element and add the type=radio attribute and radio-button class name:

<input class="radio-button" type="radio"/>

The radio-button class name is implicit when using the type=radio element.

To set the radio button as checked, add the checked attribute:

<input class="radio-button" type="radio" checked/>

Variants

Default

Default list tile styling.

<input class="radio-button" type="radio" name="radio" checked/>

Design Tokens

Resources

• MDN