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
<!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:
Example 2: In the below example we have illustrated the usage of fitted checkboxes, by triggering dark mode on ticking the checkbox.
<!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:
Reference: https://semantic-ui.com/modules/checkbox.html#fitted