<!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
>