Material Design Lite – Radio Button

Material Design Lite – Radio Button : Material Design Lite(MDL) radio button component is basically upgraded version of basic html radio button. Radio Button is basically an circle representation which is set true or false when user clicks or touches it. Radio button is used in groups ie it enables user to select one option from the two or more radio buttons. Radio button is an important form element and it is used in most cases. Material Design Lite(MDL) provides an enhanced version of the basic radio button by adding the cool visual effects. Here in this tutorial we are going to explain how you can create material design lite radio button with cool effects. You can use our online editor to edit and run the code online.

Material Design Lite – Radio Button | MDL | Example | Demo

Let us go step by step to create material design lite radio button with example and demo.

Syntax

Here is syntax to create basic Radio Button in material design lite-

To create radio button in Material design lite you first need to create a label tag with (for) attribute specifying the id and class mdl-radio mdl-js-radio and then you need to add basic html radio button with id and class mdl-radio__button. To create label for radio button add a span with class mdl-radio__label and add text inside it.

Example

Now let us create an example to understand the material design lite radio button.

If you run the above example it will produce output something like this –

Options

Following Options Are Available –

• mdl-radio: This is used to define label as an MDL component.
• mdl-js-radio: This is used to Assign the basic MDL behavior to label.
• mdl-radio__button: This is used to Apply basic MDL behavior to radio.
• mdl-radio__label: This is used to Apply basic MDL behavior to caption.
• mdl-js-ripple-effect: This is used to add ripple effect.

Material Design Lite RadioBox: Checked | Selected | Example

<br/>


 

If you run the above example it will produce output something like this –

Material Design Lite Radio Button : Ripple Effect

If you want to add the ripple effect you can add as below –