"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:

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 () - 2 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 () - 1 year ago - Reply 0


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

mouse0270 () - 1 year 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 () - 2 years ago - Reply 0


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

Sandy () - 2 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 () - 2 years ago - Reply 0


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

mouse0270 () - 2 years ago - Reply 0


This totally works. Thanks a lot!

katie () - 2 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 () - 2 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