<!DOCTYPE html> <html lang="en" class="h-100"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Example</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <link href="dist/css/component-custom-switch.css" rel="stylesheet"> </head> <body class="h-100"> <div class="container h-100"> <div class="d-flex align-items-start flex-column h-100"> <div class="w-100 m-auto py-5 text-center"> <div class="custom-switch pl-0"> <input class="custom-switch-input" id="example_01" type="checkbox"> <label class="custom-switch-btn" for="example_01"></label> </div> <hr> <div class="custom-switch custom-switch-label-io pl-0"> <input class="custom-switch-input" id="example_02" type="checkbox"> <label class="custom-switch-btn" for="example_02"></label> </div> <hr> <div class="custom-switch custom-switch-label-onoff pl-0"> <input class="custom-switch-input" id="example_03" type="checkbox"> <label class="custom-switch-btn" for="example_03"></label> </div> <hr> <div class="custom-switch custom-switch-label-yesno pl-0"> <input class="custom-switch-input" id="example_04" type="checkbox"> <label class="custom-switch-btn" for="example_04"></label> </div> <hr> <div class="custom-switch custom-switch-label-status pl-0"> <input class="custom-switch-input" id="example_05" type="checkbox"> <label class="custom-switch-btn" for="example_05"></label> </div> <hr> <div class="custom-switch custom-switch-label-onoff custom-switch-sm pl-0"> <input class="custom-switch-input" id="example_06" type="checkbox"> <label class="custom-switch-btn" for="example_06"></label> </div> <p class="my-2">I'm <code>custom-switch-sm</code></p> <hr> <div class="custom-switch custom-switch-label-onoff custom-switch-xs pl-0"> <input class="custom-switch-input" id="example_07" type="checkbox"> <label class="custom-switch-btn" for="example_07"></label> </div> <p class="my-2">I'm <code>custom-switch-xs</code></p> <hr> <div class="custom-switch custom-switch-label-yesno pl-0"> <input class="custom-switch-input" id="example_08" type="checkbox"> <label class="custom-switch-btn" for="example_08"></label> <div class="custom-switch-content-checked my-3"> <span class="text-success">I'm checked</span> </div> <div class="custom-switch-content-unchecked my-3"> <span class="text-danger">I'm unchecked (click me!)</span> </div> </div> <hr> <div class="custom-switch pl-0"> <input class="custom-switch-input" id="example_09" type="checkbox" required> <label class="custom-switch-btn" for="example_09"></label> </div> <p class="my-2">I'm <code>required</code></p> <hr> <div class="custom-switch pl-0"> <input class="custom-switch-input" id="example_10" type="checkbox" disabled> <label class="custom-switch-btn" for="example_10"></label> </div> <br> <div class="custom-switch pl-0"> <input class="custom-switch-input" id="example_11" type="checkbox" checked disabled> <label class="custom-switch-btn" for="example_11"></label> </div> <p class="my-2">I'm <code>disabled</code></p> <hr> <div class="form-group"> <label for="example_12">I'm a <label> and can be clicked:</label> <div class="custom-switch pl-0"> <input type="checkbox" class="custom-switch-input" id="example_12" checked> <label class="custom-switch-btn text-hide" for="example_12">{value}</label> </div> </div> <hr> <legend>Validation</legend> <form class="was-validated"> <div class="form-group is-invalid"> <div class="custom-switch pl-0"> <input class="custom-switch-input" id="example_13" type="checkbox"> <label class="custom-switch-btn" for="example_13"></label> </div> </div> </form> <p class="my-2">I'm <code>invalid</code></p> </div> </div> </div> </body> </html>