Semantic-UI Checkbox

Last Updated : 20 Apr, 2022

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 offers us checkbox too use checkboxes, we can apply the input tag inside of a div tag and use the ui checkbox class inside of the div tag. And the input field should have the required attribute type with the value of checkbox.

Semantic-UI Checkbox class:

checkbox: This class is used to apply the semantic ui checkbox theme on the checkbox.

Semantic-UI Checkbox Options:

Semantic UI Checkbox Types: This is used to define the type of checkbox theme you want to apply, there are default checkbox, radio, slider and toggle types of checkbox.
Semantic UI Checkbox States: This is used to define the status of the checkbox that can be read-only or checked.
Semantic UI Checkbox Variation: This is used to define the variation of the checkbox, there is only one variant rather than normal checkbox which is fitted

Syntax:

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

Below example illustrate the Semantics UI Checkbox:

Example: All checkboxes are used in this example like 4 types of checkboxes, 4 status of checkboxes and a variant.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
    </head>
    <body>
        <center>
            <h1>Geeksforgeeks</h1>
            <strong>Semantic UI Checkbox</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>
        <hr>
        <strong>Semantic-UI Checkbox-Status:</strong>
        <br><br>
        <div class="ui grid">
            <strong>Read-only Checkbox:</strong>
            <div class="four wide column">
                <div class="ui read-only checkbox">
                  <input type="checkbox">
                  <label>Accept terms and conditions</label>
                </div>
            </div>
            <strong>Checked Checkbox:</strong>
            <div class="four wide column">
                <div class="ui checked checkbox">
                  <input type="checkbox" name="example"
                         checked="">
                  <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>Disabled Checkbox:</strong>
            <div class="four wide column">
                <div class="ui checkbox disabled">
                  <input type="checkbox" name="example">
                  <label>Accept terms and conditions</label>
                </div>
            </div>
        </div>
        <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>