Foundation CSS Switch Inner Labels

Last Updated : 22 Mar, 2022

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices. Switch in general gives the user an option to select one of the two possibilities present. So a basic switch is one in which we can toggle it on or off. In Foundation CSS switch is nothing but a check-box markup which we use to create this style. Inner Labels are the text which we can give inside a switch that acts as a label for our switch.

Foundation CSS Switch Inner Labels Classes:

switch: This class is given to the element which has to be made the switch.
switch-active: This class contains active text which displays only when the switch is on.
switch-inactive: This class contains inactive text which displays only when the switch is off.

Syntax:

<div class="switch">
 <input class="switch-input" id="xyz" type="checkbox">
 <label class="switch-paddle" for="xyz">
<span class="switch-active">active text</span>
   <span class="switch-inactive">in-active text</span>
 </label>
</div>

Example 1: This is a basic example illustrating Switch Inner Labels made using Foundation CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Foundation CSS Switch Inner Labels</title> 
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
    <link rel="stylesheet" href= 
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" /> 
    <!-- Compressed JavaScript -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;">GeeksforGeeks</h1> 
        <strong>Foundation CSS Switch Inner Labels</strong> 
    </center> 
  
    <div class="switch large"> 
        <input class="switch-input" id="yes-no" 
            type="checkbox" name="exampleSwitch"> 
        <label class="switch-paddle" for="yes-no"> 
            <span class="switch-active" 
                aria-hidden="true">Yes</span> 
            <span class="switch-inactive" 
                aria-hidden="true">No</span> 
        </label> 
    </div> 
      
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
  
</html>

Output:

Example 2: This is a basic example illustrating Radio Switch Inner Labels made using Foundation CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Foundation CSS InnerLabels Switch</title> 
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
    <link rel="stylesheet" href= 
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" /> 
    <!-- Compressed JavaScript -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
</script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> 
</script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;">GeeksforGeeks</h1> 
        <strong>Foundation CSS InnerLabels Switch</strong> 
          
<p>Select Your Age below</p> 
  
    </center> 
    <div style="margin: 5% 40%;"> 
        <span>Age below 19</span> 
        <div class="switch large"> 
            <input class="switch-input" id="yes-no1" 
            type="radio" name="exampleSwitch"> 
            <label class="switch-paddle" for="yes-no1"> 
                <span class="show-for-sr">Do you like me?</span> 
                <span class="switch-active" aria-hidden="true">Yes</span> 
                <span class="switch-inactive" aria-hidden="true">No</span> 
            </label> 
        </div> 
        <span>Age between 20-45</span> 
        <div class="switch large"> 
            <input class="switch-input" id="yes-no2" 
            type="radio" name="exampleSwitch"> 
            <label class="switch-paddle" for="yes-no2"> 
                <span class="show-for-sr">Do you like me?</span> 
                <span class="switch-active" aria-hidden="true">Yes</span> 
                <span class="switch-inactive" aria-hidden="true">No</span> 
            </label> 
        </div> 
        <span>Age above 45</span> 
        <div class="switch large"> 
            <input class="switch-input" id="yes-no3" 
            type="radio" name="exampleSwitch"> 
            <label class="switch-paddle" for="yes-no3"> 
                <span class="show-for-sr">Do you like me?</span> 
                <span class="switch-active" aria-hidden="true">Yes</span> 
                <span class="switch-inactive" aria-hidden="true">No</span> 
            </label> 
        </div> 
    </div> 
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
  
</html>