"Material Design Switch"
Bootstrap 3.3.0 Snippet by mouse0270

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h3 class="text-center">Material Design Switch</h3> <hr> <div class="col-xs-12"> <p class="lead">I have been using an Android Device for the last few days and am falling in love with the switchs they use in Android. I loved them so much I wanted to port them over to Bootstrap so I could use them in future projects. I did some research and all of the ones I could find used custom colors which prevented them from working with Bootswatch or required you to edit the css files to make them match your theme. I wanted to work around that.</p> <p class="lead">Please use the theme picker above to see how this snippet works with bootswatch themes. I hope you enjoy this snippet.</p> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4"> <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Material Design Switch Demos</div> <!-- List group --> <ul class="list-group"> <li class="list-group-item"> Bootstrap Switch Default <div class="material-switch pull-right"> <input id="someSwitchOptionDefault" name="someSwitchOption001" type="checkbox"/> <label for="someSwitchOptionDefault" class="label-default"></label> </div> </li> <li class="list-group-item"> Bootstrap Switch Primary <div class="material-switch pull-right"> <input id="someSwitchOptionPrimary" name="someSwitchOption001" type="checkbox"/> <label for="someSwitchOptionPrimary" class="label-primary"></label> </div> </li> <li class="list-group-item"> Bootstrap Switch Success <div class="material-switch pull-right"> <input id="someSwitchOptionSuccess" name="someSwitchOption001" type="checkbox"/> <label for="someSwitchOptionSuccess" class="label-success"></label> </div> </li> <li class="list-group-item"> Bootstrap Switch Info <div class="material-switch pull-right"> <input id="someSwitchOptionInfo" name="someSwitchOption001" type="checkbox"/> <label for="someSwitchOptionInfo" class="label-info"></label> </div> </li> <li class="list-group-item"> Bootstrap Switch Warning <div class="material-switch pull-right"> <input id="someSwitchOptionWarning" name="someSwitchOption001" type="checkbox"/> <label for="someSwitchOptionWarning" class="label-warning"></label> </div> </li> <li class="list-group-item"> Bootstrap Switch Danger <div class="material-switch pull-right"> <input id="someSwitchOptionDanger" name="someSwitchOption001" type="checkbox"/> <label for="someSwitchOptionDanger" class="label-danger"></label> </div> </li> </ul> </div> </div> </div> </div>
.material-switch > input[type="checkbox"] { display: none; } .material-switch > label { cursor: pointer; height: 0px; position: relative; width: 40px; } .material-switch > label::before { background: rgb(0, 0, 0); box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5); border-radius: 8px; content: ''; height: 16px; margin-top: -8px; position:absolute; opacity: 0.3; transition: all 0.4s ease-in-out; width: 40px; } .material-switch > label::after { background: rgb(255, 255, 255); border-radius: 16px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); content: ''; height: 24px; left: -4px; margin-top: -8px; position: absolute; top: -4px; transition: all 0.3s ease-in-out; width: 24px; } .material-switch > input[type="checkbox"]:checked + label::before { background: inherit; opacity: 0.5; } .material-switch > input[type="checkbox"]:checked + label::after { background: inherit; left: 20px; }

Related: See More


Questions / Comments:

I realize this is really old at this point, but I am working in a really old legacy UI that we are trying to transition to Material design with as minimal impact as possible without a full re-write...

Your snippet works amazing for our need, however, as soon as we move the switches outside of the UL/LI pattern, they break... (no click response) if we toggle values programatically it works as expected... If we copy your template into ours they work fine though... I am at a loss as to what would be missing since there is no JS processing or anything that appears to be needed for this?

Any help would be greatly appreciated, thank you again for the amazingly simple MD switches :)

ktiedt () - 4 months ago - Reply 0


And now I feel like an idiot, when I modified the HTML for our templating system I included the name attribute but not the id attributes (which the for attribute is keyed to)... Sorry for the noise!

ktiedt () - 4 months ago - Reply 0


If the html is fixed it works, but if I inject html asynchronously (li elements to the ul) it does nothing, any idea why? Thanks in advance.

mmucino () - 6 months ago - Reply 0


What do i do to keep the toggle on/checked on page load. Like if an option is yes/selected i want the switch in on position when the page loads and off if its not selected.

O'Neil Fernandes () - 2 years ago - Reply 0


You have to set the "checked" property on the input.

mouse0270 () - 2 years ago - Reply 0


very nice , thanks.

George Peter () - 2 years ago - Reply 0


Not Working Please Help me

<script>
$('body').on('click','.chk',function(event) {
var flag;
if(this.checked)
{
var stt=confirm("Are You sure you want to perform this action??");
if(stt)
{
$(this).attr("checked",true);
flag=1;
}
else
{
$(this).removeAttr("checked");
}
}
else
{
var stt=confirm("Are You sure you want to perform this action??");
if(stt)
{
$(this).removeAttr("checked");
flag=0;
}
else
{
$(function(e){
//e.preventDefault();
e.stopPropagation();
$('.toggle:after').css('left','15px');
//$(this).attr("checked",true);
$(this).is(':checked')
});

}
}
});
</script>


<label>
<input type="checkbox" class="chk" checked=""/>

</label>

Hasmukh Baldaniya () - 2 years ago - Reply 0


console.log( $(obj).prop('checked') );

George Peter () - 2 years ago - Reply 0


Is there any way to "uncheck" the switches when one is "checked"? Example: When Default is checked, I want to "uncheck" all the others.

Matheus Reis Eidt () - 3 years ago - Reply 0


Any extra Libraries should be included to make it work??

Sandy () - 3 years ago - Reply 0


I'm trying to get the value of this checkbox using jQuery
$('#someSwitchOptionPrimary').val()
But this code ALWAYS return me value 'on'... so I wonder what's going on and have anybody else also seen this problem?

katie () - 3 years ago - Reply 0


$('#someSwitchOptionPrimary').is(':checked')

mouse0270 () - 3 years ago - Reply 0


This totally works. Thanks a lot!

katie () - 3 years ago - Reply 0


Yeah, sorry for the short reply, I was working and didn't have time to explain. Glad you got it working.

mouse0270 () - 3 years ago - Reply 0


I have added this in a tabs.
It works with first tab not the other tab

Zahedul Alam () - 3 years ago - Reply 0


Hey.. This code is great. Can I use this in my project ? What kinda license does this port with ?

Anudeep Bulla () - 3 years ago - Reply 0


the code is perfect!

bill barsch () - 3 years ago - Reply 0


I like this. Would like to use it in a site where we are pushing the values in to use these in a checklist fashion. However, the input and label are being kicked down a line, they are not lining up with the text in the list-group-item. I just can't work out the issue, would you be able to provide a pointer please?

Lee Alderdice () - 3 years ago - Reply 0


if you can email (rmcintosh@remabledesigns.com) me I would be happy to help. I am not quite sure what you are trying to do some images of the code and what is happening would be useful. Or access to a demo site would be perfect.

mouse0270 () - 3 years ago - Reply 0


Sorry for the delay. I had it tucked inside a card-block in bs-4 alpha and there was a padding I just kept skipping over.

Lee Alderdice () - 3 years ago - Reply 0


Great snippet, thanks!

Sudara Madushan () - 3 years ago - Reply 0


Nice!!

Ricardo () - 3 years ago - Reply 0


Nice great work, here's another way to create buttons using materials http://www.tutorialspark.co...

vikas kumar (Викас) () - 3 years ago - Reply 0


How can I get the value for whether checkbox is switched on or off into another page using PHP?

Rashesh Bosamiya () - 3 years ago - Reply 0


It is just a fancy looking checkbox. You would use the checkbox value of "true" or "false"

mouse0270 () - 3 years ago - Reply 0


yes!! I want to determine the value into next page using PHP.

Rashesh Bosamiya () - 3 years ago - Reply 0


Assign a name and a value=1 to the input tag.

For example "<input id="someSwitchOptionDanger" name="my_checkbox" value="1" type="checkbox"/>"

Then in the PHP code:

Mikey King () - 3 years ago - Reply 0


Damn it, no tags:

if($_POST['checkbox'] === 1)
{
// Is checked.
}

Mikey King () - 3 years ago - Reply 0


Thanks! man

Rashesh Bosamiya () - 3 years ago - Reply 0


Not really sure what this actually does.

NickToye () - 3 years ago - Reply 0


It should turn a checkbox into a toggle like the ones you see on android devices. If you are just seeting a checkbox on the right hand side, what browser are using and what version is that browser

mouse0270 () - 3 years ago - Reply 0


very nice snippet - thanks

gavin () - 3 years ago - Reply 0


Wow, great job. Thanks for sharing!

Bart () - 3 years ago - Reply 0