{#  radio #}
<div class="a-toggle a-toggle--radio">
	<label>
		<input type="radio" name="input-radio" value="1" />
		<span class="toggle__holder">
		</span>
		 Option 1
	</label>

	<label>
		<input type="radio" name="input-radio" value="3" checked />
		<span class="toggle__holder">
		</span>
		Checked
	</label>

	<label disabled>
		<input type="radio" name="input-radio" value="3" disabled />
		<span class="toggle__holder">
		</span>
		Disabled
	</label>
</div>

<div class="styleguide__highlight-box styleguide__highlight-box--toggle">
	<code class="js-encode-html prettyprint">
		<div class="a-toggle a-toggle--radio">
			<label>
				<input type="radio" name="input-radio" value="1" />
				<span class="toggle__holder">
				</span>
				 Option 1
			</label>

			<label>
				<input type="radio" name="input-radio" value="3" checked />
				<span class="toggle__holder">
				</span>
				Checked
			</label>

			<label disabled>
				<input type="radio" name="input-radio" value="3" disabled />
				<span class="toggle__holder">
				</span>
				Disabled
			</label>
		</div>
	</code>
</div>

{#  checkbox #}
<div class="a-toggle a-toggle--checkbox">
	<label>
		<input type="checkbox" name="input-checkbox" value="1" />
		<input type="hidden" name="input-checkboxjfds" value="1" />
		<span class="toggle__holder">
			<span class="icon-check"></span>
		</span>
		 Option 1
	</label>

	<label>
		<input type="checkbox" name="input-checkbox" value="3" checked />
		<span class="toggle__holder">
			<span class="icon-check"></span>
		</span>
		Checked
	</label>

	<label disabled>
		<input type="checkbox" name="input-checkbox" value="3" disabled />
		<span class="toggle__holder">
			<span class="icon-check"></span>
		</span>
		Disabled
	</label>

	<label>
		<input type="checkbox" name="input-checkbox" value="4" />
		<span class="toggle__holder">
			<span class="icon-check"></span>
		</span>
		An extra long label with <a href="http://littlemissrobot.com">a link </a>.
	</label>
</div>

<div class="styleguide__highlight-box styleguide__highlight-box--toggle">
	<code class="js-encode-html prettyprint">
		<div class="a-toggle a-toggle--checkbox">
			<label>
				<input type="checkbox" name="input-checkbox" value="1" />
				<input type="hidden" name="input-checkboxjfds" value="1" />
				<span class="toggle__holder">
					<span class="icon-check"></span>
				</span>
				 Option 1
			</label>

			<label>
				<input type="checkbox" name="input-checkbox" value="3" checked />
				<span class="toggle__holder">
					<span class="icon-check"></span>
				</span>
				Checked
			</label>

			<label disabled>
				<input type="checkbox" name="input-checkbox" value="3" disabled />
				<span class="toggle__holder">
					<span class="icon-check"></span>
				</span>
				Disabled
			</label>

			<label>
				<input type="checkbox" name="input-checkbox" value="4" />
				<span class="toggle__holder">
					<span class="icon-check"></span>
				</span>
				An extra long label with <a href="http://littlemissrobot.com">a link </a>.
			</label>
		</div>
	</code>
</div>

{#  switch #}
<div class="a-toggle a-toggle--switch">
	<label>
		<input type="checkbox" name="input-checkbox" value="3" />
		<span class="toggle__holder">
			<span class="toggle__button">
				<span class="toggle__on icon-check"></span>
				<span class="toggle__off icon-cross"></span>
			</span>
		</span>
		Toggle
	</label>

	<label>
		<input type="checkbox" name="input-checkbox" value="3" checked />
		<span class="toggle__holder">
			<span class="toggle__button">
				<span class="toggle__on icon-check"></span>
				<span class="toggle__off icon-cross"></span>
			</span>
		</span>
		Checked
	</label>

	<label disabled>
		<input type="checkbox" name="input-checkbox" value="3" disabled />
		<span class="toggle__holder">
			<span class="toggle__button">
				<span class="toggle__on icon-check"></span>
				<span class="toggle__off icon-cross"></span>
			</span>
		</span>
		Disabled
	</label>
</div>

<div class="styleguide__highlight-box styleguide__highlight-box--toggle">
	<code class="js-encode-html prettyprint">
		<div class="a-toggle a-toggle--switch">
			<label>
				<input type="checkbox" name="input-checkbox" value="3" />
				<span class="toggle__holder">
					<span class="toggle__button">
						<span class="toggle__on icon-check"></span>
						<span class="toggle__off icon-cross"></span>
					</span>
				</span>
				Toggle
			</label>

			<label>
				<input type="checkbox" name="input-checkbox" value="3" checked />
				<span class="toggle__holder">
					<span class="toggle__button">
						<span class="toggle__on icon-check"></span>
						<span class="toggle__off icon-cross"></span>
					</span>
				</span>
				Checked
			</label>

			<label disabled>
				<input type="checkbox" name="input-checkbox" value="3" disabled />
				<span class="toggle__holder">
					<span class="toggle__button">
						<span class="toggle__on icon-check"></span>
						<span class="toggle__off icon-cross"></span>
					</span>
				</span>
				Disabled
			</label>
		</div>
	</code>
</div>


<!-- Horizontal: -->

<p>Horizontal version: </p>

<div class="a-toggle a-toggle--radio a-toggle--horizontal">
	<label>
		<input type="radio" name="input-radio" value="1" />
		<span class="toggle__holder">
		</span>
		 Option 1
	</label>

	<label>
		<input type="radio" name="input-radio" value="3" checked />
		<span class="toggle__holder">
		</span>
		Checked
	</label>

	<label disabled>
		<input type="radio" name="input-radio" value="3" disabled />
		<span class="toggle__holder">
		</span>
		Disabled
	</label>
</div>

<div class="a-toggle a-toggle--checkbox a-toggle--horizontal">
	<label>
		<input type="checkbox" name="input-checkbox" value="1" />
		<input type="hidden" name="input-checkboxjfds" value="1" />
		<span class="toggle__holder">
			<span class="icon-check"></span>
		</span>
		 Option 1
	</label>

	<label>
		<input type="checkbox" name="input-checkbox" value="3" checked />
		<span class="toggle__holder">
			<span class="icon-check"></span>
		</span>
		Checked
	</label>

	<label disabled>
		<input type="checkbox" name="input-checkbox" value="3" disabled />
		<span class="toggle__holder">
			<span class="icon-check"></span>
		</span>
		Disabled
	</label>

	<label>
		<input type="checkbox" name="input-checkbox" value="4" />
		<span class="toggle__holder">
			<span class="icon-check"></span>
		</span>
		An extra long label with <a href="http://littlemissrobot.com">a link </a>.
	</label>
</div>

<div class="a-toggle a-toggle--switch a-toggle--horizontal">
	<label>
		<input type="checkbox" name="input-checkbox" value="3" />
		<span class="toggle__holder">
			<span class="toggle__button">
				<span class="toggle__on icon-check"></span>
				<span class="toggle__off icon-cross"></span>
			</span>
		</span>
		Toggle
	</label>

	<label>
		<input type="checkbox" name="input-checkbox" value="3" checked />
		<span class="toggle__holder">
			<span class="toggle__button">
				<span class="toggle__on icon-check"></span>
				<span class="toggle__off icon-cross"></span>
			</span>
		</span>
		Checked
	</label>

	<label disabled>
		<input type="checkbox" name="input-checkbox" value="3" disabled />
		<span class="toggle__holder">
			<span class="toggle__button">
				<span class="toggle__on icon-check"></span>
				<span class="toggle__off icon-cross"></span>
			</span>
		</span>
		Disabled
	</label>
</div>