Open In App

Semantic-UI Checkbox Toggle Type

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Semantic UI has a bunch of components for user interface design. One of them is “Checkboxes”. Checkboxes are used to show different options for the users to choose from. Users can select among them as per their choice. There are different types of checkboxes based on their shape and style. One of them is the toggle type.

Semantic UI Checkbox Toggle Type is used to make the checkbox in the form of a toggle that can be used by the user to select a true or false value. It adds a different look than the default checkbox.

Semantic-UI Checkbox Toggle Type Class:

  • toggle: This class is used to display the checkbox in the form of a toggle.

Syntax:

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

Example: This example demonstrates the checkbox toggle type using the toggle class.

HTML




<!DOCTYPE html>
<html>
  
<head>
   <link rel="stylesheet" href=
</head>
  
<body>
   <div class="ui container">
      <h2 style="color:green">
        GeeksforGeeks
      </h2>
      <b>
         <p>Semantic UI Checkbox Toggle Type</p>
      </b>
      <hr>
      <br />
      <strong>Toggle Checkboxes:</strong>
      <br /><br />
      <div class="ui toggle checkbox">
         <input type="checkbox" name="public">
         <label>
           Subscribe to GFG weekly newsletters .
        </label>
      </div>
   </div>
</body>
  
</html>


Output: You can see the checkbox as a toggle in the output below. The user can toggle between the options by clicking on the checkbox.

Toggle type checkbox

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



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