Forms
Checkboxes / Radios 
- Class name: (k-choice-input)
- Version: 1.0
This component helps you structure a list of check options (or combined select options). In this way, checkboxes may be presented one beside the other (in a same paragraph) or one after the other, in a list.
HTML5 Plain Code
-
<fieldset class="k-choice-input">
-
<legend>Choose something:</legend>
-
<p><label for="car">
-
<input id="car" value="car" name="something" checked="checked" type="checkbox"> By car</label>
-
<label for="train">
-
<input id="train" value="train" name="something" type="checkbox"> By train</label>
-
<label for="air">
-
<input id="air" value="air" name="something" disabled="disabled" type="checkbox"> By Airplane</label>
-
</p>
-
<!-- If you want a list of options, use a UL instead
-
<ul>
-
<li><label for="car">
-
<input type="checkbox" id="car" value="car" name="something" checked="checked" /> By car</label></li>
-
<li><label for="train">
-
<input type="checkbox" id="train" value="train" name="something" /> By train</label></li>
-
<li><label for="air">
-
<input type="checkbox" id="air" value="air" name="something" disabled="disabled" /> By Airplane</label></li>
-
</ul>-->
-
</fieldset>
-
<fieldset class="k-choice-input">
-
<legend>Choose version:</legend>
-
<p><label for="xhtml">
-
<input id="xhtml" value="xhtml" name="dt-version" checked="checked" type="radio"> XHTML Strict</label>
-
<label for="html5">
-
<input id="html5" value="html5" name="dt-version" type="radio"> HTML5</label>
-
<label for="xml">
-
<input id="xml" value="xml" name="dt-version" disabled="disabled" type="radio"> XML</label></p>
-
-
<!-- If you want a list of options, use a UL instead
-
<ul>
-
<li><label for="xhtml">
-
<input id="xhtml" value="xhtml" name="dt-version" checked="checked" type="radio"> XHTML Strict</label></li>
-
<li><label for="html5">
-
<input id="html5" value="html5" name="dt-version" type="radio"> HTML5</label></li>
-
<li><label for="xml">
-
<input id="xml" value="xml" name="dt-version" disabled="disabled" type="radio"> XML</label></li>
-
</ul>-->
-
</fieldset>
CSS Code
-
fieldset.k-choice-input {margin: 0 0 1em;}
-
fieldset.k-choice-input legend {
-
font-size: 90%;
-
font-weight: bold;
-
text-transform: none;
-
margin: 0 0 0.3em;
-
padding: 0;
-
}
-
fieldset.k-choice-input label {font-weight: normal;}
-
fieldset.k-choice-input ul {
-
list-style-type: none;
-
padding: 0;
-
margin: 0.3em 0 0;
-
}
-
@media screen and (min-width: 790px) {
-
fieldset.k-choice-input {
-
padding: 0.5em 1em;
-
margin: 0 2em 1em;
-
}
-
fieldset.k-choice-input legend {
-
padding: 0.5em 1em;
-
}
-
fieldset.k-choice-input label {
-
padding: 0 2em 0 0;
-
}
-
}
IE Backward Compatibility
In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments: