Semantic-UI Checkbox Fitted Variation
Last Updated :
16 Mar, 2022
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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</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
Similar Reads
Computer Science Subjects