<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Semantic UI</
title
>
<
link
href
=
rel
=
"stylesheet"
/>
</
head
>
<
body
>
<
center
>
<
h1
>Geeksforgeeks</
h1
>
<
strong
>Semantic UI Checkbox</
strong
>
</
center
>
<
br
><
br
>
<
hr
>
<
strong
>Semantic-UI Checkbox-Types:</
strong
>
<
br
><
br
>
<
div
class
=
"ui grid"
>
<
strong
>Radio Checkbox:</
strong
>
<
div
class
=
"four wide column"
>
<
div
class
=
"ui radio checkbox"
>
<
input
type
=
"radio"
name
=
"radio"
>
<
label
>Accept terms and conditions</
label
>
</
div
>
</
div
>
<
strong
>Checkbox:</
strong
>
<
div
class
=
"four wide column"
>
<
div
class
=
"ui checkbox"
>
<
input
type
=
"checkbox"
name
=
"example"
>
<
label
>Accept terms and conditions</
label
>
</
div
>
</
div
>
<
strong
>Slider Checkbox:</
strong
>
<
div
class
=
"four wide column"
>
<
div
class
=
"ui slider checkbox"
>
<
input
type
=
"checkbox"
name
=
"newsletter"
>
<
label
>Accept terms and conditions</
label
>
</
div
>
</
div
>
<
strong
>Toggle Checkbox:</
strong
>
<
div
class
=
"four wide column"
>
<
div
class
=
"ui toggle checkbox"
>
<
input
type
=
"checkbox"
name
=
"public"
>
<
label
>Accept terms and conditions</
label
>
</
div
>
</
div
>
</
div
>
<
hr
>
<
strong
>Semantic-UI Checkbox-Status:</
strong
>
<
br
><
br
>
<
div
class
=
"ui grid"
>
<
strong
>Read-only Checkbox:</
strong
>
<
div
class
=
"four wide column"
>
<
div
class
=
"ui read-only checkbox"
>
<
input
type
=
"checkbox"
>
<
label
>Accept terms and conditions</
label
>
</
div
>
</
div
>
<
strong
>Checked Checkbox:</
strong
>
<
div
class
=
"four wide column"
>
<
div
class
=
"ui checked checkbox"
>
<
input
type
=
"checkbox"
name
=
"example"
checked
=
""
>
<
label
>Accept terms and conditions</
label
>
</
div
>
</
div
>
<
strong
>Checkbox:</
strong
>
<
div
class
=
"four wide column"
>
<
div
class
=
"ui checkbox"
>
<
input
type
=
"checkbox"
name
=
"example"
>
<
label
>Accept terms and conditions</
label
>
</
div
>
</
div
>
<
strong
>Disabled Checkbox:</
strong
>
<
div
class
=
"four wide column"
>
<
div
class
=
"ui checkbox disabled"
>
<
input
type
=
"checkbox"
name
=
"example"
>
<
label
>Accept terms and conditions</
label
>
</
div
>
</
div
>
</
div
>
<
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
>