Semantic-UI Checkbox Variations
Last Updated :
10 Jun, 2022
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...