<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Semantic UI</
title
>
<
link
href
=
rel
=
"stylesheet"
/>
</
head
>
<
body
>
<
div
style
=
"margin-top: 20px;"
class
=
"ui container"
>
<
div
class
=
"ui form"
>
<
h2
>Inline Radio Button</
h2
>
<
div
class
=
"inline fields"
>
<
label
for
=
"gender"
>Gender</
label
>
<
div
class
=
"field"
>
<
div
class
=
"ui radio checkbox"
>
<
input
type
=
"radio"
name
=
"gender"
checked
=
""
tabindex
=
"0"
class
=
"hidden"
>
<
label
>Male</
label
>
</
div
>
</
div
>
<
div
class
=
"field"
>
<
div
class
=
"ui radio checkbox"
>
<
input
type
=
"radio"
name
=
"gender"
tabindex
=
"0"
class
=
"hidden"
>
<
label
>Female</
label
>
</
div
>
</
div
>
<
div
class
=
"field"
>
<
div
class
=
"ui radio checkbox"
>
<
input
type
=
"radio"
name
=
"gender"
tabindex
=
"0"
class
=
"hidden"
>
<
label
>Rather not Say</
label
>
</
div
>
</
div
>
</
div
>
<
h2
>Grouped Radio Button </
h2
>
<
div
class
=
"grouped fields"
>
<
label
for
=
"branch"
>Select your Branch</
label
>
<
div
class
=
"field"
>
<
div
class
=
"ui radio checkbox"
>
<
input
type
=
"radio"
name
=
"branch"
checked
=
""
tabindex
=
"0"
class
=
"hidden"
>
<
label
>CSE</
label
>
</
div
>
</
div
>
<
div
class
=
"field"
>
<
div
class
=
"ui radio checkbox"
>
<
input
type
=
"radio"
name
=
"branch"
tabindex
=
"0"
class
=
"hidden"
>
<
label
>IT</
label
>
</
div
>
</
div
>
<
div
class
=
"field"
>
<
div
class
=
"ui radio checkbox"
>
<
input
type
=
"radio"
name
=
"branch"
tabindex
=
"0"
class
=
"hidden"
>
<
label
>ECE</
label
>
</
div
>
</
div
>
<
div
class
=
"field"
>
<
div
class
=
"ui radio checkbox"
>
<
input
type
=
"radio"
name
=
"branch"
tabindex
=
"0"
class
=
"hidden"
>
<
label
>ME</
label
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
src
=
integrity
=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
</
script
>
<
script
>
$('.ui.radio.checkbox').checkbox();
</
script
>
</
body
>
</
html
>