Onsen UI Switch CSS Components

Last Updated : 28 Jun, 2022

In this article, we will learn how to include switch components using Onsen UI. Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop.

Switch CSS Components The switch is a kind of toggle button that is used to create a button that will shift from one place to another on click and do some functionality.

Syntax:

<element-name class="class-name">...</element-name>

Classes Used:

switch__input: This class will tell the user what kind of input they should give.
switch__toggle: This class is to set the interface of the switch and it will change when the user clicks the button.
switch__handle: This class is used to shift the button from one end to the other on click.

Example 1: In the below code, we will make use of the above classes to make a switch.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
        "https://unpkg.com/onsenui/css/onsenui.css" />
    <link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" />
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js">
    </script>
 
    <style>
        #heading {
            color: green;
        }
 
        #title {
            font-style: bold;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 id="heading">
            GeeksforGeeks
        </h1>
        <h3>A computer science portal for geeks</h3>
        <strong id="title">
            Onsen UI CSS Component
        </strong>
        <br>
 
        <label class="switch">
            <input type="checkbox" class="switch__input">
            <div class="switch__toggle">
                <div class="switch__handle"></div>
            </div>
        </label>
    </center>
</body>
 
</html>

Output:

Example 2: In the below code, we will make use of the above classes to make a switch.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
        "https://unpkg.com/onsenui/css/onsenui.css" />
    <link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" />
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js">
    </script>
 
    <style>
        body {
            background-color: lightgrey;
        }
 
        #heading {
            color: green;
        }
 
        #title {
            font-style: bold;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 id="heading">
            GeeksforGeeks
        </h1>
        <h3>A computer science portal for geeks</h3>
        <strong id="title">
            Onsen UI CSS Component
        </strong>
        <br><br>
 
        <label class="switch">
            <input type="checkbox" class="switch__input">
            <div class="switch__toggle">
                <div class="switch__handle"></div>
            </div>
        </label><br><br>
        <label class="switch">
            <input type="checkbox" class="switch__input">
            <div class="switch__toggle">
                <div class="switch__handle"></div>
            </div>
        </label><br><br>
        <label class="switch">
            <input type="checkbox" class="switch__input">
            <div class="switch__toggle">
                <div class="switch__handle"></div>
            </div>
        </label>
    </center>
</body>
 
</html>