Open In App

Semantic-UI Checkbox Types

Improve
Improve
Like Article
Like
Save
Share
Report

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 types offers us different types of checkbox, so we can use different types of checkboxes during our development. Below all the 4 types of checkboxes are mentioned and described well.

Semantic UI Checkbox Types class:

  • checkbox: This class is used to create normal checkbox.
  • radio: This class is used to create radio checkbox.
  • toggle: This class is used to create toggle checkbox.
  • slider: This class is used to create slider checkbox.

Syntax:

<div class="ui checkbox-types-class">

Below example illustrate the Semantics UI Checkbox Types:

Example:

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
        rel="stylesheet" />
    </head>
    <body>
        <center>
            <h1>Geeksforgeeks</h1>
            <strong>Semantic UI Checkbox Types</strong>
        </center>
        <br><br>
        <hr>
        <strong>Semantic-UI Checkbox-Types:</strong>
        <br><br>
        <div class="ui grid">
            <strong>Radio Checkbox:</strong>
            <div class="four wide column">
                <div class="ui radio checkbox">
                  <input type="radio" name="radio">
                  <label>Accept terms and conditions</label>
                </div>
            </div>
            <strong>Checkbox:</strong>
            <div class="four wide column">
                <div class="ui checkbox">
                  <input type="checkbox" name="example">
                  <label>Accept terms and conditions</label>
                </div>
            </div>
            <strong>Slider Checkbox:</strong>
            <div class="four wide column">
                <div class="ui slider checkbox">
                  <input type="checkbox" name="newsletter">
                  <label>Accept terms and conditions</label>
                </div>
            </div>
            <strong>Toggle Checkbox:</strong>
            <div class="four wide column">
                <div class="ui toggle checkbox">
                    <input type="checkbox" name="public">
                    <label>Accept terms and conditions</label>
                </div>
            </div>
        </div>
         
    </body>
</html>


Output:

Semantic UI Checkbox Types

Semantic UI Checkbox Types 

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



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