Cases à cocher et boutons radio - Exemples pratiques

<h2>Grandes cases à cocher avec étiquettes explicites</h2>
<fieldset class="gc-chckbxrdio">
	<legend>Choisissez vos 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">Moutarde</label>
		</li>
	</ul>
</fieldset>

<h2>Grandes cases à cocher désactivé avec étiquettes explicites</h2>
<fieldset class="gc-chckbxrdio">
	<legend>Choisissez vos 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">Moutarde</label>
		</li>
	</ul>
</fieldset>

<h2><span lang="en">Tickbox</span> - élément unique avec étiquette explicite dans un formulaire horizontal</h2>
<form class="form-inline" method="get" action="#">
	<div class="form-group">
		<label class="wb-inv" for="exampleInputEmail2">Courriel</label>
		<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Entrez votre courriel" />
	</div>
	<div class="form-group">
		<label class="wb-inv" for="exampleInputPassword2">Mot de passe</label>
		<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Mot de passe" />
	</div>
	<div class="checkbox gc-chckbxrdio">
		<input id="remember2" type="checkbox" />
		<label for="remember2">Se souvenir de moi</label>
	</div>
	<button type="submit" class="btn btn-default">Se connecter</button>
</form>

<h2><span lang="en">Tickbox</span> - éléments uniques avec étiquette explicite dans un </h2>
<div class="row">
	<div class="col-md-3">
		<h3 class="wb-inv">Options</h3>
		<details open>
			<summary>
				<h4 class="h5">Options</h4>
			</summary>
			<p class="mrgn-tp-md">Utilisez les options ci-dessous pour modifier vos ...</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">Pour</span></legend>
						<ul class="list-unstyled">
							<li class="checkbox gc-chckbxrdio">
								<input type="checkbox" id="dt_audience1" value="">
								<label for="dt_audience1">Tous</label>
							</li>
							<li class="checkbox gc-chckbxrdio">
								<input type="checkbox" id="dt_audience2" value="">
								<label for="dt_audience2">Gouvernement</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>Titre</th>
					<th>Date de publication</th>
					<th>Ministère</th>
					<th>Type de nouvelles</th>
					<th>Résumé</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Document d’information : Dix-sept projets d'infrastructure prévus ...</td>
					<td>2016-07-26 14:07:00</td>
					<td>Infrastructure Canada</td>
					<td>Documents d’information</td>
					<td>The governments of Canada and ...</td>
				</tr>
				<tr>
					<td>Dix-sept projets d'infrastructure prévus ...</td>
					<td>2016-07-26 14:07:00</td>
					<td>Infrastructure Canada</td>
					<td>Communiqués de presse</td>
					<td>Providing community residents ...</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

<h2>Grands boutons radio avec étiquettes explicites</h2>
<fieldset class="gc-chckbxrdio">
	<legend>Quel est votre animal favori?&nbsp;:</legend>
	<ul class="list-unstyled lst-spcd-2">
		<li class="radio">
			<input type="radio" name="animal" id="animal-1">
			<label for="animal-1">Le chien</label>
		</li>
		<li class="radio">
			<input type="radio" name="animal" id="animal-2">
			<label for="animal-2">Le chat</label>
		</li>
		<li class="radio">
			<input type="radio" name="animal" id="animal-3">
			<label for="animal-3">Le rat</label>
		</li>
	</ul>
</fieldset>

<h2>Avec étiquettes explicites dans un formulaire horizontal</h2>
<section>
	<h3>Grands boutons radio</h3>
	<fieldset class="gc-chckbxrdio form-inline">
		<legend>Veuillez choisir une option&nbsp;:</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>Grandes cases à cocher</h3>
	<fieldset class="gc-chckbxrdio form-inline">
		<legend>Choisissez vos condiments&nbsp;:</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">Moutarde</label>
		</div>
	</fieldset>
</section>