Semantic-UI Form Checkbox Content

Last Updated : 23 Mar, 2022

Semantic UI is the open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website.

The form is a container that has different types of input elements such as text fields, submit buttons, radio buttons, checkboxes, etc.

Semantic-UI Form is used to create the beautiful form using form classes. Semantic-UI Form Checkbox Content is used to create the checkbox using the checkbox class.

In this article, we will discuss Form Checkbox Content in Semantic-UI.

Semantic-UI Form Checkbox Content Class:

checkbox: This class is used to create the checkbox.

Syntax:

<div class="ui checkbox">
   <input type="checkbox" class="hidden">
</div>

Example 1: The following code demonstrates the Semantic-UI Form Checkbox Content with standard checkbox and radio checkbox.

HTML

<!DOCTYPE html>
<html>

<head>
      <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"></script>

      <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
      </script>
</head>

<body>
  <center>
    <h2 style="color: green">
        GeeksforGeeks
    </h2>
  
    <h3>
      Semantic-UI Form Checkbox Content
    </h3>

    <div class="ui form">
      <div class="inline field">
        <div class="ui checkbox">
          <input type="checkbox" tabindex="0" class="hidden">
          <label>Standard Checkbox</label>
        </div>
      </div>
      
      <div class="inline field">
        <div class="ui radio checkbox">
          <input type="checkbox" tabindex="0" class="hidden">
          <label>Radio Checkbox</label>
        </div>
      </div>
    </div>
  </center>

  <script>
    $('.ui.checkbox').checkbox();
  </script>
</body>

</html>

Output:

Example 2: The following code demonstrates the Semantic-UI Form Checkbox Content with slider checkbox and toggle checkbox.

HTML

<!DOCTYPE html>
<html>

<head>
  <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">
  </script>
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
  </script>
</head>

<body>
  <center>
    <h2 style="color: green">
        GeeksforGeeks
    </h2>
  
    <h3>
      Semantic-UI Form Checkbox Content
    </h3>

    <div class="ui form">
      <div class="inline field">
        <div class="ui slider checkbox">
          <input type="checkbox" tabindex="0" class="hidden">
          <label>Slider Checkbox</label>
        </div>
      </div>
      
      <div class="inline field">
        <div class="ui toggle checkbox">
          <input type="checkbox" tabindex="0" class="hidden">
          <label>Toggle Checkbox</label>
        </div>
      </div>
    </div>
  </center>

  <script>
    $('.ui.checkbox').checkbox();
  </script>
</body>

</html>