Semantic-UI Checkbox Variations
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 Checkbox Variations offers us different Variations of checkbox, so we can use different Variations of checkboxes during our development.
Semantic UI Checkbox Variations class:
- fitted: This class is used when the developer does not want that the checkbox should not leave padding for a label.
Syntax:
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
Below example illustrate the Semantics UI Checkbox Variations:
Example:
HTML
<!DOCTYPE html><html> <head> <title>Semantic UI</title> <link href= rel="stylesheet" /> </head> <body> <center> <h1>Geeksforgeeks</h1> <strong>Semantic UI Checkbox Variations</strong> </center> <br><br> <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 Variations
Reference: https://semantic-ui.com/modules/checkbox.html
Please Login to comment...