Sélection de la langue

Gouvernement du Canada / Government of Canada

Recherche

Cases à cocher et boutons radio: Système de conception de Canada.ca

  • Dernière modification : 2020-10-21

Les cases à cocher et les boutons radio servent de contrôle de formulaire. Ils permettent aux gens de sélectionner une réponse à une question ou de confirmer des réponses.

Les cases à cocher et les boutons radio en grand format sont plus faciles à sélectionner et à utiliser, en particulier sur un appareil mobile.

Sur cette page

Utilisation

Les cases à cocher et les boutons radio doivent être utilisés pour les questions interactives, comme les formulaires de demande ou les assistants:

Quoi éviter

N'utilisez pas de cases à cocher ou de boutons radio si les options présentées ne sont pas facilement comparables. Dans ces cas, utilisez plutôt la configuration « Services et renseignements » (lien et description).

Pour une question autonome comportant peu d’options et une quantité gérable de contenu par option qui n’exige pas de pages distinctes, utilisez plutôt du contenu affichable/masquable ou une interface à onglets :

Mise en œuvre

Grandes cases à cocher

Utilisation : Les grandes cases à cocher sont la conception recommandée pour les cases à cocher. À utiliser particulièrement lorsque l’utilisateur peut faire une ou plusieurs sélections pour répondre à une question.

Quoi éviter : Ne pas utiliser de grandes cases à cocher pour une liste de contrôle ayant des éléments qui nécessitent un saut de ligne, ou lorsqu’il y a un seul élément à cocher. Pour ces situations, utilisez plutôt les petites cases à cocher.

Grandes cases à cocher avec étiquettes explicites

Choisissez vos condiments :
Code
HTML 
<fieldset class="provisional 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>
CSS 
.provisional.gc-chckbxrdio label {
	cursor: pointer;
	display: block;
	font-size: 20px;
}
.provisional.gc-chckbxrdio legend {
	float: none;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 15px;
	margin-top: 0;
}
.provisional.gc-chckbxrdio input[type="checkbox"] {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.provisional.gc-chckbxrdio input[type="checkbox"][disabled] + label {
	cursor: not-allowed;
	opacity: .5;
}
.provisional.gc-chckbxrdio input[type="checkbox"] + label {
	display: inline-block;
	line-height: 2;
	margin-left: 36px;
	width: auto;
}
.provisional.gc-chckbxrdio input[type="checkbox"] + label::before {
	border: 4px solid #fff;
	-webkit-box-shadow: 0 0 0 2px #000;
	box-shadow: 0 0 0 2px #000;
	content: "";
	display: inline-block;
	height: 36px;
	left: 0;
	position: absolute;
	top: 2px;
	width: 36px;
}
.provisional.gc-chckbxrdio input[type="checkbox"] + label:hover::before {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e5e5), color-stop(50%, white));
	background-image: linear-gradient(to bottom, #e6e5e5, white 50%);
}
.provisional.gc-chckbxrdio input[type="checkbox"]:focus + label::before {
	-webkit-box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
	box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
}
.provisional.gc-chckbxrdio input[type="checkbox"]:checked + label::after {
	border-color: #333;
	border-style: solid;
	border-width: 0 5px 5px 0;
	content: "";
	display: inline-block;
	height: 26px;
	left: 12px;
	position: absolute;
	top: 4px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 13px;
}

Grandes cases à cocher désactivées avec étiquettes explicites

Choisissez vos condiments :
Code
HTML 
<fieldset class="provisional gc-chckbxrdio">
	<legend>Choisissez vos condiments :</legend>
	<ul class="list-unstyled lst-spcd-2">
		<li class="checkbox">
			<input type="checkbox" id="cond4" disabled>
			<label for="cond1">Ketchup</label>
		</li>
		<li class="checkbox">
			<input type="checkbox" id="cond5">
			<label for="cond2">Relish</label>
		</li>
		<li class="checkbox">
			<input type="checkbox" id="cond6" disabled>
			<label for="cond3">Moutarde</label>
		</li>
	</ul>
</fieldset>
CSS 
.provisional.gc-chckbxrdio label {
	cursor: pointer;
	display: block;
	font-size: 20px;
}
.provisional.gc-chckbxrdio legend {
	float: none;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 15px;
	margin-top: 0;
}
.provisional.gc-chckbxrdio input[type="checkbox"] {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.provisional.gc-chckbxrdio input[type="checkbox"][disabled] + label {
	cursor: not-allowed;
	opacity: .5;
}
.provisional.gc-chckbxrdio input[type="checkbox"] + label {
	display: inline-block;
	line-height: 2;
	margin-left: 36px;
	width: auto;
}
.provisional.gc-chckbxrdio input[type="checkbox"] + label::before {
	border: 4px solid #fff;
	-webkit-box-shadow: 0 0 0 2px #000;
	box-shadow: 0 0 0 2px #000;
	content: "";
	display: inline-block;
	height: 36px;
	left: 0;
	position: absolute;
	top: 2px;
	width: 36px;
}
.provisional.gc-chckbxrdio input[type="checkbox"] + label:hover::before {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e5e5), color-stop(50%, white));
	background-image: linear-gradient(to bottom, #e6e5e5, white 50%);
}
.provisional.gc-chckbxrdio input[type="checkbox"]:focus + label::before {
	-webkit-box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
	box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
}
.provisional.gc-chckbxrdio input[type="checkbox"]:checked + label::after {
	border-color: #333;
	border-style: solid;
	border-width: 0 5px 5px 0;
	content: "";
	display: inline-block;
	height: 26px;
	left: 12px;
	position: absolute;
	top: 4px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 13px;
}

Petites cases à cocher

Utilisation : Utiliser les petites cases à cocher uniquement lorsqu’il y a un seul élément à cocher, comme dans le cas d’une confirmation.

Quoi éviter : Ne pas utiliser de petites cases à cocher pour les réponses à une question ou les listes de contrôle. Pour ces situations, utilisez plutôt les grandes cases à cocher :

Utilisez un bouton plutôt qu’une case à cocher lorsqu’il n'y a qu'un seul élément à cocher, particulièrement lorsqu’il s’agit de l’action principale de la page ou d’un élément permettant de passer à l’étape suivante.

Élément unique avec étiquette explicite dans un formulaire horizontal

</input>
</input>
</input>
Code
HTML 
<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 provisional 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>
CSS 
.provisional.gc-chckbxrdio label {
	cursor: pointer;
	display: block;
	font-size: 20px;
}
.provisional.gc-chckbxrdio legend {
	float: none;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 15px;
	margin-top: 0;
}
.provisional.gc-chckbxrdio input[type="checkbox"] {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.provisional.gc-chckbxrdio input[type="checkbox"][disabled] + label {
	cursor: not-allowed;
	opacity: .5;
}
.provisional.gc-chckbxrdio input[type="checkbox"] + label {
	display: inline-block;
	line-height: 2;
	margin-left: 36px;
	width: auto;
}
.provisional.gc-chckbxrdio input[type="checkbox"] + label::before {
	border: 4px solid #fff;
	-webkit-box-shadow: 0 0 0 2px #000;
	box-shadow: 0 0 0 2px #000;
	content: "";
	display: inline-block;
	height: 36px;
	left: 0;
	position: absolute;
	top: 2px;
	width: 36px;
}
.provisional.gc-chckbxrdio input[type="checkbox"] + label:hover::before {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e5e5), color-stop(50%, white));
	background-image: linear-gradient(to bottom, #e6e5e5, white 50%);
}
.provisional.gc-chckbxrdio input[type="checkbox"]:focus + label::before {
	-webkit-box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
	box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
}
.provisional.gc-chckbxrdio.checkbox input[type="checkbox"] + label,
.provisional.gc-chckbxrdio.checkbox input[type="checkbox"] + label + ul {
	font-size: 17px;
	min-height: 23px;
}
.provisional.gc-chckbxrdio.checkbox input[type="checkbox"] + label::before {
	height: 24px;
	left: 6px;
	top: 4px;
	width: 24px;
}
.provisional.gc-chckbxrdio.checkbox input[type="checkbox"]:checked + label::after {
	border-width: 0 3px 3px 0;
	height: 16px;
	left: 14px;
	top: 6px;
	width: 9px;
}
.provisional.gc-chckbxrdio input[type="checkbox"]:checked + label::after {
	border-color: #333;
	border-style: solid;
	border-width: 0 5px 5px 0;
	content: "";
	display: inline-block;
	height: 26px;
	left: 12px;
	position: absolute;
	top: 4px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 13px;
}

Boutons radio

Grands boutons radio avec étiquettes explicites

Utilisation : Utiliser des boutons radio lorsqu’une seule sélection peut être faite dans une liste.

Quel est votre animal favori? :
Code
HTML 
<fieldset class="gc-chckbxrio">
	<legend>Quel est votre animal favori? <small class="text-muted">(cases à cocher + explicit label, grande case)</small></legend>
	<ul class="list-unstyled lst-spcd-2">
		<li class="radio">
			<input type="radio" name="animal" id="animal-1">
			<label for="animal-1">Les chiens</label>
		</li>
		<li class="radio">
			<input type="radio" name="animal" id="animal-2">
			<label for="animal-2">Les chats</label>
		</li>
		<li class="radio">
			<input type="radio" name="animal" id="animal-3">
			<label for="animal-3">Les rats</label>
		</li>
	</ul>
</fieldset>
CSS 
.provisional.gc-chckbxrdio label {
	cursor: pointer;
	display: block;
	font-size: 20px;
}
.provisional.gc-chckbxrdio legend {
	float: none;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 15px;
	margin-top: 0;
}
.provisional.gc-chckbxrdio input[type="radio"] {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.provisional.gc-chckbxrdio input[type="radio"][disabled] + label {
	cursor: not-allowed;
	opacity: .5;
}
.provisional.gc-chckbxrdio input[type="radio"] + label {
	display: inline-block;
	line-height: 2;
	margin-left: 36px;
	width: auto;
}
.provisional.gc-chckbxrdio input[type="radio"] + label::before {
	border: 4px solid #fff;
	-webkit-box-shadow: 0 0 0 2px #000;
	box-shadow: 0 0 0 2px #000;
	content: "";
	display: inline-block;
	height: 36px;
	left: 0;
	position: absolute;
	top: 2px;
	width: 36px;
}
.provisional.gc-chckbxrdio input[type="radio"] + label:hover::before {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e5e5), color-stop(50%, white));
	background-image: linear-gradient(to bottom, #e6e5e5, white 50%);
}
.provisional.gc-chckbxrdio input[type="radio"]:focus + label::before {
	-webkit-box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
	box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
}
.provisional.gc-chckbxrdio input[type="radio"] + label::before {
	border-radius: 50%;
}
.provisional.gc-chckbxrdio input[type="radio"]:checked + label::before {
	background: #444;
}

Grands boutons radio avec étiquettes explicites dans un formulaire horizontal

Veuillez choisir une option :
Code
HTML 
<fieldset class="provisional gc-chckbxrdio form-inline">
	<legend>Veuillez choisir une option :</legend>
	<div class="label-inline">
		<input type="radio" id="inlineRadio1" name="optradio">
		<label for="inlineRadio1">Option 1</label>
	</div>
	<div class="label-inline">
		<input type="radio" id="inlineRadio2" name="optradio">
		<label for="inlineRadio2">Option 2</label>
	</div>
	<div class="label-inline">
		<input type="radio" id="inlineRadio3" name="optradio">
		<label for="inlineRadio3">Option 3</label>
	</div>
</fieldset>
CSS 
.provisional.gc-chckbxrdio label {
	cursor: pointer;
	display: block;
	font-size: 20px;
}
.provisional.gc-chckbxrdio legend {
	float: none;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 15px;
	margin-top: 0;
}
.provisional.gc-chckbxrdio input[type="radio"] {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.provisional.gc-chckbxrdio input[type="radio"][disabled] + label {
	cursor: not-allowed;
	opacity: .5;
}
.provisional.gc-chckbxrdio input[type="radio"] + label {
	display: inline-block;
	line-height: 2;
	margin-left: 36px;
	width: auto;
}
.provisional.gc-chckbxrdio input[type="radio"] + label::before {
	border: 4px solid #fff;
	-webkit-box-shadow: 0 0 0 2px #000;
	box-shadow: 0 0 0 2px #000;
	content: "";
	display: inline-block;
	height: 36px;
	left: 0;
	position: absolute;
	top: 2px;
	width: 36px;
}
.provisional.gc-chckbxrdio input[type="radio"] + label:hover::before {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e5e5), color-stop(50%, white));
	background-image: linear-gradient(to bottom, #e6e5e5, white 50%);
}
.provisional.gc-chckbxrdio input[type="radio"]:focus + label::before {
	-webkit-box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
	box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
}
.provisional.gc-chckbxrdio input[type="radio"] + label::before {
	border-radius: 50%;
}
.provisional.gc-chckbxrdio input[type="radio"]:checked + label::before {
	background: #444;
}
.provisional.gc-chckbxrdio.form-inline .label-inline {
	padding-right: 20px;
}
.provisional.gc-chckbxrdio.form-inline .label-inline label {
	padding-left: 10px;
}

Options de configuration

Option Description Mode d’emploi de la configuration
Grandes cases à cocher Conception des grandes cases à cocher et des boutons radio Ajouter la classe gc-chckbxrdio à l'élément fieldset ou l'élément parent qui contient toutes les zones d'entrée de type checkbox/radio
Petites case à cocher Utiliser les petites cases à cocher lorsqu’il n'y a qu'un seul élément à cocher, comme dans le cas d’une confirmation.

Pour des cases à cocher plus compactes, la classe gc-chckbxrdio doit être présente dans l'élément parent de la case à cocher avec la classe checkbox

État de désactivation Les entrées désactivées ne seront pas cliquables. Les indications visuelles comprennent le grisage de la commande et l’ajout d’une icône d’arrêt lorsque le pointeur de la souris est placé au-dessus de la commande. Pour ajouter un état de désactivation, ajouter un attribut disabled à la zone d’entrée
Format horizontal Les boutons radio ou les cases à cocher en ligne s’affichent côte à côte sur un écran plus grand et se poursuivent sur de nouvelles lignes, plutôt que d’être alignés verticalement. Ajouter la classe form-inline à l'élément qui contient l'ensemble des cases à coher ou des boutons radio. Aussi ajouter la classe label-inline à chaque élément parent de case à cocher ou de bouton radio.

Recherche et blogue

Nous avons testé avec succès l'utilisation listes à cocher interactives lors d'un projet d'optimisation avec l'Agence du revenu du Canada et pour la création de listes concernant les restrictions de voyage dues à la COVID-19.

Derniers changements

Version 0.1:
Lancé la version bêta des cases à cocher et boutons radio.

Détails de la page

Date de modification :