<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Foundation CSS Radio Switch</
title
>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"
/>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green;"
>GeeksforGeeks</
h1
>
<
strong
>Foundation CSS Radio Switch</
strong
>
<
p
>Different Sizes for radio switch</
p
>
</
center
>
<
div
style
=
"margin: 5% 45%;"
>
<
span
>Tiny switch</
span
>
<
div
class
=
"switch tiny"
>
<
input
class
=
"switch-input"
id
=
"exampleRadioSwitch1"
type
=
"radio"
checked
name
=
"testGroup"
>
<
label
class
=
"switch-paddle"
for
=
"exampleRadioSwitch1"
>
<
span
class
=
"show-for-sr"
>Radio Switch</
span
>
</
label
>
</
div
>
<
span
>Small switch</
span
>
<
div
class
=
"switch small"
>
<
input
class
=
"switch-input"
id
=
"exampleRadioSwitch2"
type
=
"radio"
checked
name
=
"testGroup"
>
<
label
class
=
"switch-paddle"
for
=
"exampleRadioSwitch2"
>
<
span
class
=
"show-for-sr"
>Radio Switch</
span
>
</
label
>
</
div
>
<
span
>Medium switch</
span
>
<
div
class
=
"switch medium"
>
<
input
class
=
"switch-input"
id
=
"exampleRadioSwitch3"
type
=
"radio"
checked
name
=
"testGroup"
>
<
label
class
=
"switch-paddle"
for
=
"exampleRadioSwitch3"
>
<
span
class
=
"show-for-sr"
>Radio Switch</
span
>
</
label
>
</
div
>
</
div
>
<
script
>
$(document).foundation();
</
script
>
</
body
>
</
html
>