Checkboxes and radio buttons - Working examples

<h2>Large checkboxes target with explicit labels</h2>
<fieldset class="gc-chckbxrdio">
	<legend>Choose your condiments:</legend>
	<ul class="list-unstyled lst-spcd-2">
		<li class="checkbox">
			<input type="checkbox" id="cond1">
			<label for="cond1">Ketchup</label>
		</li>
		<li class="checkbox">
			<input type="checkbox" id="cond2">
			<label for="cond2">Relish</label>
		</li>
		<li class="checkbox">
			<input type="checkbox" id="cond3">
			<label for="cond3">Mustard</label>
		</li>
	</ul>
</fieldset>

<h2>Large disabled checkboxes target with explicit labels</h2>
<fieldset class="gc-chckbxrdio">
	<legend>Choose your condiments:</legend>
	<ul class="list-unstyled lst-spcd-2">
		<li class="checkbox">
			<input type="checkbox" id="cond4">
			<label for="cond4">Ketchup</label>
		</li>
		<li class="checkbox">
			<input type="checkbox" id="cond5" disabled>
			<label for="cond5">Relish</label>
		</li>
		<li class="checkbox">
			<input type="checkbox" id="cond6" disabled>
			<label for="cond6">Mustard</label>
		</li>
	</ul>
</fieldset>

<h2>Tickbox - single smaller checkbox target with explicit label inline form</h2>
<form class="form-inline" method="get" action="#">
	<div class="form-group">
		<label class="wb-inv" for="exampleInputEmail2">Email address</label>
		<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email" />
	</div>
	<div class="form-group">
		<label class="wb-inv" for="exampleInputPassword2">Password</label>
		<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" />
	</div>
	<div class="checkbox gc-chckbxrdio">
		<input id="remember2" type="checkbox" />
		<label for="remember2">Remember me</label>
	</div>
	<button type="submit" class="btn btn-default">Sign in</button>
</form>

<h2>Tickbox - single smaller checkbox targets with explicit label in a filter box</h2>
<div class="row">
	<div class="col-md-3">
		<h3 class="wb-inv">Filtering options</h3>
		<details open>
			<summary>
				<h4 class="h5">Filter options</h4>
			</summary>
			<p class="mrgn-tp-md">Use filters to below options to change the focus ...</p>
			<form class="wb-tables-filter" data-bind-to="dataset-filter">
				<div class="form-group">
					<fieldset class="legend-brdr-bttm">
						<legend><span class="field-name">For</span></legend>
						<ul class="list-unstyled">
							<li class="checkbox gc-chckbxrdio">
								<input type="checkbox" id="dt_audience1" value="">
								<label for="dt_audience1">Everyone</label>
							</li>
							<li class="checkbox gc-chckbxrdio">
								<input type="checkbox" id="dt_audience2" value="">
								<label for="dt_audience2">Government</label>
							</li>
						</ul>
					</fieldset>
				</div>
			</form>
		</details>
	</div>
	<div class="col-md-9">
		<table class="wb-tables table table-striped table-hover" id="dataset-filter" aria-live="polite">
			<thead>
				<tr>
					<th>Title</th>
					<th>Publication date</th>
					<th>Department</th>
					<th>News Type</th>
					<th>Summary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Backgrounder: Seventeen Infrastructure Projects in ...</td>
					<td>2016-07-26 14:07:00</td>
					<td>Infrastructure Canada</td>
					<td>Backgrounders</td>
					<td>The governments of Canada and ...</td>
				</tr>
				<tr>
					<td>Seventeen Infrastructure Projects in ...</td>
					<td>2016-07-26 14:07:00</td>
					<td>Infrastructure Canada</td>
					<td>News Releases</td>
					<td>Providing community residents ...</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

<h2>Large radio buttons target with explicit labels</h2>
<fieldset class="gc-chckbxrdio">
	<legend>Which is your favorite pet?</legend>
	<ul class="list-unstyled lst-spcd-2">
		<li class="radio">
			<input type="radio" name="animal" id="animal-1">
			<label for="animal-1">Dog</label>
		</li>
		<li class="radio">
			<input type="radio" name="animal" id="animal-2">
			<label for="animal-2">Cat</label>
		</li>
		<li class="radio">
			<input type="radio" name="animal" id="animal-3">
			<label for="animal-3">Rat</label>
		</li>
	</ul>
</fieldset>

<h2>With explicit labels in an inline form</h2>
<section>
	<h3>Large radio buttons target</h3>
	<fieldset class="gc-chckbxrdio form-inline">
		<legend>Choose an option:</legend>
		<div class="radio label-inline">
			<input id="inlineRadio1" type="radio" name="optradio">
			<label for="inlineRadio1">Option 1</label>
		</div>
		<div class="radio label-inline">
			<input id="inlineRadio2" type="radio" name="optradio">
			<label for="inlineRadio2">Option 2</label>
		</div>
		<div class="radio label-inline">
			<input id="inlineRadio3" type="radio" name="optradio">
			<label for="inlineRadio3">Option 3</label>
		</div>
	</fieldset>
</section>
<section>
	<h3>Large checkboxes target</h3>
	<fieldset class="gc-chckbxrdio form-inline">
		<legend>Choose your condiments:</legend>
		<div class="checkbox label-inline">
			<input id="inlineCheckbox1" type="checkbox" name="optcheckbox">
			<label for="inlineCheckbox1">Ketchup</label>
		</div>
		<div class="checkbox label-inline">
			<input id="inlineCheckbox2" type="checkbox" name="optcheckbox">
			<label for="inlineCheckbox2">Relish</label>
		</div>
		<div class="checkbox label-inline">
			<input id="inlineCheckbox3" type="checkbox" name="optcheckbox">
			<label for="inlineCheckbox3">Mustard</label>
		</div>
	</fieldset>
</section>