December 21, 2016

Materialize Switches

Materialize Switches : Switches are basically used to show the On/Off state. Materialize uses checkboxes for switches it sets checkbox’s value to 1 when we click on “on” level, and it sets checkbox’s value to 0 when we click on “Off” level. It is very simple to create switches in Materialize framework. Here in tutorial we are going to explain how you can create switches in Materialize. You can also use our online editor to edit and run the code online.

Materialize Switches Example

Let us first create a very basic and simple switch. First create a div with class=”switch” and then add label tag and inside the label tag add input type=”checkbox” and a span with class=”lever”.

Materialize Switches Example:

<div class="switch">
    <label>
      Turn Off
      <input type="checkbox">
      <span class="lever"></span>
      Turn On
    </label>
  </div>

Try it »

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