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-

Material Design Lite โ€“ Radio Button Syntax:

<label class="mdl-radio mdl-js-radio for="option-id">
  <input type="radio" id="option-id" class="mdl-radio__button" name="options" value="1">
  <span class="mdl-radio__label">Radio Button</span>
</label>

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.

Material Design Lite โ€“ Radio Button Example:

<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
</head>
<body>
<label class="mdl-radio mdl-js-radio" for="option-id">
  <input type="radio" id="option-id" class="mdl-radio__button" name="options" value="1">
  <span class="mdl-radio__label">Radio Button</span>
</label>
</body>
</html>  

Try it ยป

If you run the above example it will produce output something like this โ€“

Material Design Lite โ€“ Radio Button
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.

Learn More

Let us create some more examples and demos here.


Material Design Lite RadioBox: Checked | Selected | Example

Material Design Lite RadioBox: Checked | Selected | Example

<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
</head>
<body>
<label class="mdl-radio mdl-js-radio" for="option-id1">
  <input type="radio" id="option-id1" class="mdl-radio__button" name="options" value="1" checked>
  <span class="mdl-radio__label">Male</span>
</label><br>
<label class="mdl-radio mdl-js-radio" for="option-id2">
  <input type="radio" id="option-id2" class="mdl-radio__button" name="options" value="2" >
  <span class="mdl-radio__label">Female</span>
</label>
</body>
</html> 

Try it ยป

If you run the above example it will produce output something like this โ€“

Material Design Lite Radio Button : Ripple Effect

Material Design Lite Radio Button : Ripple Effect

If you want to add the ripple effect you can add as below โ€“

Material Design Lite Radio Button : Ripple Effect | Example

<label for="myId" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
  <input type="checkbox" id="myId" class="mdl-checkbox__input" >
  <span class="mdl-checkbox__label">Enable Fullscreen</span>
</label>

Try it ยป


Advertisements

Add Comment

๐Ÿ“– Read More