Semantic-UI Checkbox Fitted Variation
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. It uses a class to add CSS to the elements.
The checkbox is a great way to take input from the user when the range of inputs accepted is limited. It increases the interactivity of the HTML forms. Semantic UI provides us with custom-styled Checkboxes. The fitted Checkbox is a variation of the checkbox which does not provide any padding for the label element.
Semantic UI Checkbox Fitted Variation Classes:
- fitted: It is used to remove the padding provided for the label element.
Syntax:
<div class="ui fitted toggle checkbox">
<input type="checkbox">
<label>...</label>
</div>
Example 1: In the below example we have illustrated the difference between a normal checkbox and a fitted checkbox
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Checkbox Fitted Variation</title> <link href= rel="stylesheet" /> <script src= integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script> </head> <body> <div class="ui container"> <h2 style="color: green;">GeeksForGeeks</h2> <h4>Semantic UI Checkbox Fitted Variation</h4> <hr> <br /> <form class="ui form"> <h2 style="color: green;">Without Fitted Class</h2> <h5>Default Fitted Checkbox</h5> <div class="inline-field"> <div class="ui checkbox"> <input type="checkbox"> <label>Default</label> </div> </div> <h5>Fitted Slider Checkbox</h5> <div class="inline-field"> <div class="ui slider checkbox"> <input type="checkbox"> <label>Slider</label> </div> </div> <h5>Fitted Toggle Checkbox</h5> <div class="inline-field"> <div class="ui toggle checkbox"> <input type="checkbox"> <label>Toggle</label> </div> </div> <h2 style="color: green;">With Fitted Class</h2> <h5>Default Fitted Checkbox</h5> <div class="inline-field"> <div class="ui fitted checkbox"> <input type="checkbox"> <label>Default</label> </div> </div> <h5>Fitted Slider Checkbox</h5> <div class="inline-field"> <div class="ui fitted slider checkbox"> <input type="checkbox"> <label>Slider</label> </div> </div> <h5>Fitted Toggle Checkbox</h5> <div class="inline-field"> <div class="ui fitted toggle checkbox"> <input type="checkbox"> <label>Toggle</label> </div> </div> </form> </div> <script> $('.ui.checkbox').checkbox(); </script> </body> </html> |
Output:
Semantic-UI Checkbox Fitted Variation
Example 2: In the below example we have illustrated the usage of fitted checkboxes, by triggering dark mode on ticking the checkbox.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Checkbox Fitted Variation</title> <link href= rel="stylesheet" /> <script src= integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script> </head> <body style="width: 100vw; height: 100vh;"> <div class="ui container"> <h2 style="color: green;">GeeksForGeeks</h2> <h4>Semantic UI Checkbox Fitted Variation</h4> <hr> <br /> <form class="ui form"> <h5>Fitted Toggle Checkbox</h5> <div class="inline-field"> <div class="ui fitted toggle checkbox"> <input type="checkbox" onclick="trigger()"> </div> </div> </form> </div> <script> const input = document.querySelector("input"); const h4 = document.querySelector("h4"); const h5 = document.querySelector("h5"); const body = document.querySelector("body"); $('.ui .checkbox').checkbox({ onChecked: function (){ console.log("Checked"); h4.style.color = "white"; h5.style.color = "white"; body.style.backgroundColor = "black"; }, onUnchecked: function (){ console.log("Unchecked"); h4.style.color = "black"; h5.style.color = "black"; body.style.backgroundColor = "white"; } }); </script> </body> </html> |
Output:
Semantic-UI Checkbox Fitted Variation
Reference: https://semantic-ui.com/modules/checkbox.html#fitted
Please Login to comment...