Option Fields

Options for all tastes with a few classes

Checkbox and Radio buttons
  1. Details: Checkbox options (optional)
  2. Details: Radio buttons
  3. Details: Horizontal
Complex radio button - widh icon
Complex radio button - without icon
Extra checkbox
  • Preview ad
  • Preview ad
<form class="form">
	<fieldset>
		<legend>Checkbox and Radio buttons</legend>
		<ol>
			<li>
				<details open="">
					<summary>Details: Checkbox options <em>(optional)</em></summary>
					<ul>
						<li>
							<label for="browser_ff">
								<input id="browser_ff" name="available_browsers[]" class="checkbox" type="checkbox" value="ff">
								First option (Input inside label)
							</label>
						</li>
						<li>
							<input id="browser_ie" name="available_browsers[]" class="hidden" type="checkbox" value="ie">
							<label for="browser_ie">Second option (Input before label)</label>
						</li>
					</ul>
				</details>
			</li>
			<li>
				<details open="">
					<summary>Details: Radio buttons</summary>
					<ul>
						<li>
							<label for="first-option"><input type="radio" id="first-option" name="radio" /> First option (native)</label>
						</li>
						<li>
							<input type="radio" id="second-option" name="radio" />
							<label for="second-option">Second option (Input before label)</label>
						</li>
					</ul>
				</details>
			</li>
			<li>
				<details open="">
					<summary>Details: Horizontal</summary>
					<ul class="list _horizontal">
						<li>
							<input type="radio" id="first-option1" name="radio" />
							<label for="first-option1">First option</label>
						</li>
						<li>
							<input type="radio" id="second-option1" name="radio" />
							<label for="second-option1">Second option</label>
						</li>
						<li>
							<input type="radio" id="third-option1" name="radio" />
							<label for="third-option1">Third option</label>
						</li>
					</ul>
				</details>
			</li>
		</ol>
	</fieldset>
	<fieldset>
		<legend>Complex radio button - widh icon</legend>
		<ol>
			<li>
				<ul class="radio-list-complex">
					<li>
						<input type="radio" name="complex-radio" id="complex-radio-1" />
						<label for="complex-radio-1">
							<img src="../static/img/chuck.jpg" alt="image" />
							<span class="title">Complex option 1</span>
						</label>
					</li>
					<li class="selected">
						<input type="radio" name="complex-radio" id="complex-radio-2" checked="checked" />
						<label for="complex-radio-2">
							<img src="../static/img/chuck.jpg" alt="image" />
							<span class="title">Complex option 2</span>
							<span><em>Lorem ipsum dolor sit amet.</em></span>
						</label>
					</li>
					<li>
						<input type="radio" name="complex-radio" id="complex-radio-3" />
						<label for="complex-radio-3">
							<img src="../static/img/chuck.jpg" alt="image" />
							<span class="title">Complex option 3</span>
							<span><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em></span>
						</label>
					</li>
					<li>
						<input type="radio" name="complex-radio" id="complex-radio-4" />
						<label for="complex-radio-4">
							<img src="../static/img/chuck.jpg" alt="image" />
							<span class="title">Complex option 4</span>
							<span><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em></span>
						</label>
					</li>
					<li>
						<input type="radio" name="complex-radio" id="complex-radio-5" />
						<label for="complex-radio-5">
							<img src="../static/img/chuck.jpg" alt="image" />
							<span class="title">Complex option 5</span>
							<span><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em></span>
						</label>
					</li>
				</ul>
			</li>
		</ol>
	</fieldset>
	<fieldset>
		<legend>Complex radio button - without icon</legend>
		<ul class="radio-list-complex no-icon">
			<li>
				<input type="radio" id="listed_ad_yes" name="choice_listed" value="yes" />
				<label for="listed_ad_yes">
					<span class="title d-i">Yes,</span> <em>My software is currently listed on this website</em>
				</label>
			</li>
			<li>
				<input type="radio" id="not_listed_ad" name="choice_listed" value="yes">
				<label for="not_listed_ad">
					<span class="title d-i">No,</span> <em>If your software is not listed yet, create your ad and publish it later</em>
				</label>
			</li>
		</ul>
		<input type="hidden" name="current_action" value="listed" />
	</fieldset>
	<fieldset>
		<legend>Extra checkbox</legend>
		<ul class="checkbox-list-complex no-icon">
			<li>
				<input type="checkbox" id="get-extra" name="choice_listed" value="yes" />
				<label for="get-extra">
					<span class="title">Get extra daily clicks <em>by adding an ad targeting this sections.</em></span>
					<em>Your campaign daily budget will not be exceeded. This ad will complete the campaign consuming the undelivered budget.</em>
				</label>
				<a title="View Sample" href="#" class="icon-eye-open">Preview ad</a>
			</li>
			<li class="selected">
				<input type="checkbox" id="get-extra2" name="choice_listed" value="yes" checked="checked" />
				<label for="get-extra2">
					<span class="title">Get extra daily clicks <em>by adding an ad targeting this sections.</em></span>
					<em>Your campaign daily budget will not be exceeded. This ad will complete the campaign consuming the undelivered budget.</em>
				</label>
				<a title="View Sample" href="#" class="icon-eye-open">Preview ad</a>
			</li>
		</ul>
	</fieldset>
</form>