Semantic-UI Checkbox Fitted Variation

Last Updated : 16 Mar, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.

The checkbox is a great way to take input from the user when the range of inputs accepted is limited. It increases the interactivity of the HTML forms. Semantic UI provides us with custom-styled Checkboxes. The fitted Checkbox is a variation of the checkbox which does not provide any padding for the label element.

Semantic UI Checkbox Fitted Variation Classes:

fitted: It is used to remove the padding provided for the label element.

Syntax:

<div class="ui fitted toggle checkbox">
    <input type="checkbox">
    <label>...</label>
</div>

Example 1: In the below example we have illustrated the difference between a normal checkbox and a fitted checkbox

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI Checkbox Fitted Variation</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"
            integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
            crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="ui container"> 
        <h2 style="color: green;">GeeksForGeeks</h2> 
        <h4>Semantic UI Checkbox Fitted Variation</h4> 
        <hr> 
        <br /> 
        <form class="ui form"> 
            <h2 style="color: green;">Without Fitted Class</h2> 
            <h5>Default Fitted Checkbox</h5> 
            <div class="inline-field"> 
                <div class="ui checkbox"> 
                    <input type="checkbox"> 
                    <label>Default</label> 
                </div> 
            </div> 
            <h5>Fitted Slider Checkbox</h5> 
            <div class="inline-field"> 
                <div class="ui slider checkbox"> 
                    <input type="checkbox"> 
                    <label>Slider</label> 
                </div> 
            </div> 
            <h5>Fitted Toggle Checkbox</h5> 
            <div class="inline-field"> 
                <div class="ui toggle checkbox"> 
                    <input type="checkbox"> 
                    <label>Toggle</label> 
                </div> 
            </div> 
            <h2 style="color: green;">With Fitted Class</h2> 
            <h5>Default Fitted Checkbox</h5> 
            <div class="inline-field"> 
                <div class="ui fitted checkbox"> 
                    <input type="checkbox"> 
                    <label>Default</label> 
                </div> 
            </div> 
            <h5>Fitted Slider Checkbox</h5> 
            <div class="inline-field"> 
                <div class="ui fitted slider checkbox"> 
                    <input type="checkbox"> 
                    <label>Slider</label> 
                </div> 
            </div> 
            <h5>Fitted Toggle Checkbox</h5> 
            <div class="inline-field"> 
                <div class="ui fitted toggle checkbox"> 
                    <input type="checkbox"> 
                    <label>Toggle</label> 
                </div> 
            </div> 
        </form> 
    </div> 
  
    <script> 
        $('.ui.checkbox').checkbox(); 
    </script> 
</body> 
  
</html>

Output:

Semantic-UI Checkbox Fitted Variation

Example 2: In the below example we have illustrated the usage of fitted checkboxes, by triggering dark mode on ticking the checkbox.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Semantic UI Checkbox Fitted Variation</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"
            integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
            crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body style="width: 100vw; height: 100vh;"> 
    <div class="ui container"> 
        <h2 style="color: green;">GeeksForGeeks</h2> 
        <h4>Semantic UI Checkbox Fitted Variation</h4> 
        <hr> 
        <br /> 
        <form class="ui form"> 
            <h5>Fitted Toggle Checkbox</h5> 
            <div class="inline-field"> 
                <div class="ui fitted toggle checkbox"> 
                    <input type="checkbox" 
                           onclick="trigger()"> 
                </div> 
            </div> 
        </form> 
    </div> 
  
    <script> 
        const input = document.querySelector("input"); 
        const h4 = document.querySelector("h4"); 
        const h5 = document.querySelector("h5"); 
        const body = document.querySelector("body"); 
  
        $('.ui .checkbox').checkbox({ 
            onChecked: function (){ 
                console.log("Checked"); 
                h4.style.color = "white"; 
                h5.style.color = "white"; 
                body.style.backgroundColor = "black"; 
            }, 
  
            onUnchecked: function (){ 
                console.log("Unchecked"); 
                h4.style.color = "black"; 
                h5.style.color = "black"; 
                body.style.backgroundColor = "white"; 
            } 
        }); 
    </script> 
</body> 
</html>