[ KAWWA PORTAL ] Components : Checkboxes / Radios

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.

Demo
Snippets

Choose something:

By car By train By Airplane

Choose version:

XHTML Strict HTML5 XML

HTML5 Plain Code

COPY

```
<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

COPY

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:

Top

KAWWA Markup Pattern Library

Forms

Checkboxes / Radios

HTML5 Plain Code

CSS Code

IE Backward Compatibility

Download List (0)

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce