August 15, 2016

Material Design Lite – Switch

Material Design Lite – Switch Button : Switch is an enhanced version of basic html element ie. checkbox. Switch button is basically used to provide the turn on/ off functionality. Binary state true/false is set when user turns on/off the button. Material Design Lite(MDL) provides switch button component to create the beautiful switch buttons. Here in this tutorial we are going to explain how you can create Material Design Lite switch buttons. You can use online editor to edit and run the code online.

Material Design Lite – Switch Button | On | Off Example

Let us create simple switch buttons in material design Lite(MDL).

Syntax

Here is syntax to create basic switch button –

Material Design Lite – Switch Button Example:

<label for="switch-btn" class="mdl-switch mdl-js-switch">
  <input type="checkbox" id="switch-btn" class="mdl-switch__input">
  <span class="mdl-switch__label">Button Name</span>
</label>

First create a label with class mdl-switch, mdl-js-switch and an attribute “for” (switch-btn). Now create default checkbox with id(switch-btn) and class mdl-switch__input now create a span with class mdl-switch__label to add the switch button label.

Example

Now let us create a simple switch button –

Material Design Lite Switch 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 for="switch-btn" class="mdl-switch mdl-js-switch">
  <input type="checkbox" id="switch-btn" class="mdl-switch__input">
  <span class="mdl-switch__label">Volume off/on</span>
</label>
</body>
</html>

Try it »

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

Options

Following Options are available for the switch buttons –

mdl-switch: This is used to define label as an MDL component.
mdl-js-switch: This is used to Assign the basic MDL behavior to label.
mdl-switch__input: This is used to Apply basic MDL behavior to switch.
mdl-switch__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 example and demo.