Foundation CSS Switch Sizing Classes

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. Sizing Classes means the different classes available based on which we select the size of the switch.

Foundation CSS Switch Sizing Classes:

switch: This class is given to the element which has to be made the switch.
tiny: This class sets the size of the switch to tiny.
small: This class sets the size of the switch to small.
large: This class sets the size of the switch to large.

Syntax:

<div class="switch size-class">
 <input class="switch-input" id="xy" type="checkbox">
 <label class="switch-paddle" for="xy">
   <span class="show-for-sr">...</span>
 </label>
</div>

Example 1: This is a basic example illustrating basic Switch Sizing Classes made using Foundation CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <title>Foundation CSS Switch Sizing Classes</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 Sizing Classes</strong> 
    </center> 
    <div style="margin: 5% 45%"> 
      <span>Tiny Switch</span> 
      <div class="switch tiny"> 
        <input
          class="switch-input"
          id="tinySwitch"
          type="checkbox"
          name="exampleSwitch1"
        /> 
        <label class="switch-paddle" for="tinySwitch"> 
          <span class="show-for-sr">Tiny Sandwiches Enabled</span> 
        </label> 
      </div> 
      <span>Small Switch</span> 
      <div class="switch small"> 
        <input
          class="switch-input"
          id="smallSwitch"
          type="checkbox"
          name="exampleSwitch2"
        /> 
        <label class="switch-paddle" for="smallSwitch"> 
          <span class="show-for-sr">Small Portions Only</span> 
        </label> 
      </div> 
      <span>Large Switch</span> 
      <div class="switch large"> 
        <input
          class="switch-input"
          id="largeSwitch"
          type="checkbox"
          name="exampleSwitch3"
        /> 
        <label class="switch-paddle" for="largeSwitch"> 
          <span class="show-for-sr">Show Large Elephants</span> 
        </label> 
      </div> 
    </div> 
    <script> 
      $(document).foundation(); 
    </script> 
  </body> 
</html> 

Output:

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <title>Foundation CSS Switch Sizing Classes</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> 
    <!DOCTYPE html> 
    <html lang="en"> 
      <head> 
        <title>Foundation CSS Switch Sizing Classes</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 Sizing Classes</strong> 
            
<p>Radio Type Switch of different sizes</p> 
  
        </center> 
        <div style="margin: 5% 45%"> 
          <span>Tiny Switch</span> 
          <div class="switch tiny"> 
            <input
              class="switch-input"
              id="tinySwitch"
              type="radio"
              name="exampleSwitch"
              checked 
            /> 
            <label class="switch-paddle" for="tinySwitch"> 
              <span class="show-for-sr">Tiny Sandwiches Enabled</span> 
            </label> 
          </div> 
          <span>Small Switch</span> 
          <div class="switch small"> 
            <input
              class="switch-input"
              id="smallSwitch"
              type="radio"
              name="exampleSwitch"
            /> 
            <label class="switch-paddle" for="smallSwitch"> 
              <span class="show-for-sr">Small Portions Only</span> 
            </label> 
          </div> 
          <span>Large Switch</span> 
          <div class="switch large"> 
            <input
              class="switch-input"
              id="largeSwitch"
              type="radio"
              name="exampleSwitch"
            /> 
            <label class="switch-paddle" for="largeSwitch"> 
              <span class="show-for-sr">Show Large Elephants</span> 
            </label> 
          </div> 
        </div> 
        <script> 
          $(document).foundation(); 
        </script> 
      </body> 
    </html> 
    <center> 
      <h1 style="color: green">GeeksforGeeks</h1> 
      <strong>Foundation CSS Switch Sizing Classes</strong> 
    </center> 
    <div style="margin: 5% 45%"> 
      <span>Tiny Switch</span> 
      <div class="switch tiny"> 
        <input
          class="switch-input"
          id="tinySwitch"
          type="checkbox"
          name="exampleSwitch1"
        /> 
        <label class="switch-paddle" for="tinySwitch"> 
          <span class="show-for-sr">Tiny Sandwiches Enabled</span> 
        </label> 
      </div> 
      <span>Small Switch</span> 
      <div class="switch small"> 
        <input
          class="switch-input"
          id="smallSwitch"
          type="checkbox"
          name="exampleSwitch2"
        /> 
        <label class="switch-paddle" for="smallSwitch"> 
          <span class="show-for-sr">Small Portions Only</span> 
        </label> 
      </div> 
      <span>Large Switch</span> 
      <div class="switch large"> 
        <input
          class="switch-input"
          id="largeSwitch"
          type="checkbox"
          name="exampleSwitch3"
        /> 
        <label class="switch-paddle" for="largeSwitch"> 
          <span class="show-for-sr">Show Large Elephants</span> 
        </label> 
      </div> 
    </div> 
    <script> 
      $(document).foundation(); 
    </script> 
  </body> 
</html> 