Open In App

Semantic-UI Checkbox

Last Updated : 20 Apr, 2022
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 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>
 






                        










Output:


Semantic-UI Checkbox
Semantic-UI Checkbox


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


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Semantic-UI Accordion Variations
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Semantic-UI Checkbox Types
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                ReactJS Semantic UI Checkbox Module
            

        
    
        
            

                Semantic-UI  Checkbox States
            

        
    
        
            

                Semantic-UI Checkbox Variations
            

        
    
        
            

                Semantic-UI Checkbox Types
            

        
    
        
            

                Semantic-UI Checkbox Checked State
            

        
    
        
            

                Semantic-UI Checkbox Disabled State
            

        
    
        
            

                Semantic-UI Checkbox Toggle Type
            

        
    
        
            

                Semantic-UI Checkbox Slider Type
            

        
    
        
            

                Semantic-UI Checkbox Read-only State
            

        
    
        
            

                Semantic-UI Checkbox Radio Type
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
S

        

            
        

        

                                    


                                    

                                        skyridetim                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox