KAWWA Markup Pattern Library


Forms

Checkboxes / Radios Component Information

  • Class name: (k-choice-input)
  • Version: 1.0

Add to list

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.

Choose something:

Choose version:

HTML5 Plain Code

COPY
  1. <fieldset class="k-choice-input">
  2. 	<legend>Choose something:</legend>
  3. 	<p><label for="car">
  4. 			<input id="car" value="car" name="something" checked="checked" type="checkbox"> By car</label> 
  5. 		<label for="train">
  6. 			<input id="train" value="train" name="something" type="checkbox"> By train</label> 
  7. 		<label for="air">
  8. 			<input id="air" value="air" name="something" disabled="disabled" type="checkbox"> By Airplane</label>
  9. 	</p>
  10. 	<!-- If you want a list of options, use a UL instead
  11. 	<ul>
  12. 		<li><label for="car">
  13. 				<input type="checkbox" id="car" value="car" name="something" checked="checked" /> By car</label></li>
  14. 		<li><label for="train"> 
  15. 				<input type="checkbox" id="train" value="train" name="something" /> By train</label></li>
  16. 		<li><label for="air"> 
  17. 				<input type="checkbox" id="air" value="air" name="something" disabled="disabled" /> By Airplane</label></li>
  18. 	</ul>-->
  19. </fieldset>
  20. 
                                
  21. <fieldset class="k-choice-input">
  22. 	<legend>Choose version:</legend>
  23. 	<p><label for="xhtml">
  24. 			<input id="xhtml" value="xhtml" name="dt-version" checked="checked" type="radio"> XHTML Strict</label> 
  25. 		<label for="html5">
  26. 			<input id="html5" value="html5" name="dt-version" type="radio"> HTML5</label> 
  27. 		<label for="xml">
  28. 			<input id="xml" value="xml" name="dt-version" disabled="disabled" type="radio"> XML</label></p>
  29. 		
  30. 	<!-- If you want a list of options, use a UL instead			
  31. 	<ul>
  32. 		<li><label for="xhtml">
  33. 				<input id="xhtml" value="xhtml" name="dt-version" checked="checked" type="radio"> XHTML Strict</label></li>
  34. 		<li><label for="html5">
  35. 				<input id="html5" value="html5" name="dt-version" type="radio"> HTML5</label></li>
  36. 		<li><label for="xml">
  37. 				<input id="xml" value="xml" name="dt-version" disabled="disabled" type="radio"> XML</label></li>
  38. 	</ul>-->
  39. </fieldset>

CSS Code

COPY
  1. fieldset.k-choice-input {margin: 0 0 1em;}
  2. 
                                
  3. fieldset.k-choice-input legend {
  4. 	font-size: 90%;
  5. 	font-weight: bold;
  6. 	text-transform: none;
  7. 	margin: 0 0 0.3em;
  8. 	padding: 0;
  9. }
  10. 
                                
  11. fieldset.k-choice-input label {font-weight: normal;}
  12. 
                                
  13. fieldset.k-choice-input ul {
  14. 	list-style-type: none;
  15. 	padding: 0;
  16. 	margin: 0.3em 0 0;
  17. }
  18. 
                                
  19. @media screen and (min-width: 790px) {
  20. 	fieldset.k-choice-input {
  21. 		padding: 0.5em 1em;
  22. 		margin: 0 2em 1em;
  23. 	}
  24. 	fieldset.k-choice-input legend {
  25. 		padding: 0.5em 1em;
  26. 	}
  27. 	fieldset.k-choice-input label {
  28. 		padding: 0 2em 0 0;
  29. 	}
  30. }
  31. 
                                

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:

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce