Open In App

Foundation CSS Radio Switch

Improve
Improve
Like Article
Like
Save
Share
Report

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. Radio Switch is similar to radio buttons in HTML where we can only select one option among the available given options.

Foundation CSS Radio Switch Classes:

  • switch: This class is given to the element which has to be made the switch.
  • switch-paddle: This class is responsible for the style created on the original checkbox and this is also responsible for the box background around the switch.
  • radio: This should be the input type of the element switch-input.

Syntax:

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

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

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Radio Switch</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
    <!-- Compressed JavaScript -->
    <script src=
</script>
    <script src=
</script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">GeeksforGeeks</h1>
        <strong>Foundation CSS Radio Switch</strong>
    </center>
    <div style="margin: 5% 45%;">
        <div class="switch">
            <input class="switch-input" id="exampleRadioSwitch1" 
            type="radio" checked name="testGroup">
            <label class="switch-paddle" for="exampleRadioSwitch1">
                <span class="show-for-sr">Radio Switch</span>
            </label>
        </div>
        <div class="switch">
            <input class="switch-input" id="exampleRadioSwitch2" 
            type="radio" checked name="testGroup">
            <label class="switch-paddle" for="exampleRadioSwitch2">
                <span class="show-for-sr">Radio Switch</span>
            </label>
        </div>
        <div class="switch">
            <input class="switch-input" id="exampleRadioSwitch3" 
            type="radio" checked name="testGroup">
            <label class="switch-paddle" for="exampleRadioSwitch3">
                <span class="show-for-sr">Radio Switch</span>
            </label>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>


Output:

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

HTML




<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Foundation CSS Radio Switch</title>
        <!-- Compressed CSS -->
        <link rel="stylesheet" href=
        <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
        <!-- Compressed JavaScript -->
        <script src=
</script>
        <script src=
</script>
    </head>
    <body>
        <center>
        <h1 style="color: green;">GeeksforGeeks</h1>
        <strong>Foundation CSS Radio Switch</strong>
          
<p>Different Sizes for radio switch</p>
  
        </center>
        <div style="margin: 5% 45%;">
        <span>Tiny switch</span>
        <div class="switch tiny">
            <input class="switch-input" id="exampleRadioSwitch1" 
            type="radio" checked name="testGroup">
            <label class="switch-paddle" for="exampleRadioSwitch1">
              <span class="show-for-sr">Radio Switch</span>
            </label>
        </div>
        <span>Small switch</span>
        <div class="switch small">
            <input class="switch-input" id="exampleRadioSwitch2" 
            type="radio" checked name="testGroup">
            <label class="switch-paddle" for="exampleRadioSwitch2">
              <span class="show-for-sr">Radio Switch</span>
            </label>
        </div>
        <span>Medium switch</span>
        <div class="switch medium">
            <input class="switch-input" id="exampleRadioSwitch3" 
            type="radio" checked name="testGroup">
            <label class="switch-paddle" for="exampleRadioSwitch3">
              <span class="show-for-sr">Radio Switch</span>
            </label>
        </div>
        </div>
        <script>
            $(document).foundation();
        </script>
    </body>
</html>


Output:

Reference: https://get.foundation/sites/docs/switch.html



Last Updated : 22 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads