How to create IOS 7 style beautiful radio switch button using Switchery JS

AuthorHariom Prajapati

Pubish Date05 Aug 2022

categoryCSS

In this article we will see how to create IOS 7 style beautiful radio switch button using Switchery JS.

Switchery is a component which use to make beautiful IOS 7 style switches for our checkbox.

 

CDN

https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css
https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js

 

How to create IOS 7 style beautiful radio switch button using Switchery JS

<!DOCTYPE html>
<html>
<head>
    <title>how to create IOS 7 style beautiful radio switch button using Switchery JS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js" type="text/javascript"></script>
</head>
<body>

<input type="checkbox" class="js-switch" checked />

<script type="text/javascript">
  var elem = document.querySelector('.js-switch');
  var init = new Switchery(elem);
</script>


</body>
</html>

 

Output

Switchery Radio Button

 

Comments 0

Leave a comment