Skip to content
Related Articles

Related Articles

Semantic-UI Checkbox Variations

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Jun, 2022
View Discussion
Improve Article
Save Article

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS and jQuery to incorporate in different frameworks.

Semantic-UI Checkbox Variations offers us different Variations of checkbox, so we can use different Variations of checkboxes during our development. 

Semantic UI Checkbox Variations class:

  • fitted: This class is used when the developer does not want that the checkbox should not leave padding for a label.

Syntax:

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

Below example illustrate the Semantics UI Checkbox Variations:

Example:

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
        rel="stylesheet" />
    </head>
    <body>
        <center>
            <h1>Geeksforgeeks</h1>
            <strong>Semantic UI Checkbox Variations</strong>
        </center>
        <br><br>
        <hr>
        <strong>Semantic-UI Checkbox-Variations:</strong>
        <br><br>
        <div class="ui grid">
            <strong>fitted checkbox:</strong>
            <div class="three wide column">
              <div class="ui fitted checkbox">
                <input type="checkbox">
                <label></label>
              </div>
            </div>
            <strong>fitted slider checkbox:</strong>
            <div class="three wide column">
            <div class="ui fitted slider checkbox">
                <input type="checkbox">
                <label></label>
              </div>
            </div>
            <strong>fitted toggle checkbox:</strong>
            <div class="three wide column">
              <div class="ui fitted toggle checkbox">
                <input type="checkbox">
                <label></label>
              </div>
            </div>
        </div>
         
    </body>
</html>


Output:

Semantic-UI Checkbox Variations

Semantic-UI Checkbox Variations

Reference: https://semantic-ui.com/modules/checkbox.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!