Semantic-UI Checkbox Checked State

Last Updated : 06 Feb, 2022

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 to users to choose from. Users can select among them as per their choice. Depending on the requirements of the usage of checkboxes there are different states of checkboxes. One of them is checked state.

Semantic UI Checkbox Checked State: The user might need to show a checkbox as default checked. The value of some options might generally be true and to save the user’s time ticking it every time this state of the checkbox is used. Users can also make it false by clicking on it. Only the initial state of the checkbox checked state is true.

Syntax:

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

Example 1: This example demonstrates the checkbox read-only state using the checked class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
   <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"     
    rel="stylesheet"/> 
</head> 
  
<body> 
 <div class="ui container"> 
    <h2 style="color:green"> 
      GeeksforGeeks 
    </h2> 
    <b> 
         
<p>Semantic UI Checkbox Checked State</p> 
  
    </b><hr><br/> 
  
    <strong>Checked Checkbox:</strong> 
    <br/><br/> 
    <div class="ui form"> 
       <div class="inline fields"> 
          <label> 
            What is your favourite  
            Javascript framework? 
          </label> 
  
          <div class="field"> 
             <div class="ui checked checkbox"> 
                <input type="checkbox" 
                  name="example" checked=""> 
                <label>React</label> 
             </div> 
          </div> 
  
          <div class="field"> 
             <div class="ui checked checkbox"> 
                <input type="checkbox" 
                  name="example" checked=""> 
                <label>Vue</label> 
             </div> 
          </div> 
  
          <div class="field"> 
             <div class="ui checked checkbox"> 
                <input type="checkbox" 
                  name="example" checked=""> 
                <label>Angular</label> 
             </div> 
          </div> 
       </div> 
    </div> 
 </div> 
</body> 
  
</html>