Cases à cocher et boutons radio

Statut

Stable

Type

Conception de Canada.ca

Dernière revue

2021-05-10

Orientation

Cases à cocher et boutons radio - Configuration de conception de Canada.ca

Nom technique

• gc-chckbxrdio

But

Affiche des cases à cocher et boutons radio plus grand que ce qui est nativement offert par les navigateurs et qui est conforme avec les configurations de conception de Canada.ca

Un problème de longue date avec les cases à cocher et les boutons radio est que les étiquettes ne semblent pas cliquables pour la plupart des gens

Même en utilisant des conceptions qui mettent en évidence le texte de l'étiquette ou mettent l'entrée et l'étiquette avec un contour gris, les études ont montré que les gens voulaient toujours cliquer sur la conception d'entrée.

Utilisation

Comment mettre en œuvre

• 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.
• Pour des cases à cocher plus compactes (tickbox), la classe gc-chckbxrdio doit être présent dans l'élément parent de la case à cocher avec la classe checkbox.
• Pour ajouter un état de désactivation, ajouter un attribut disabled à la zone d’entrée.
• Pour le format horizontal, 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.

Exemples pratiques

• Exemples : Cases à cocher et boutons radio

Évaluation et rapport

Il n'y a pas d'évaluation et de rapport disponible pour ce composant.

API (Version 1.0)

Classe CSS (v1.0)

gc-chckbxrdio

Composant : Cases à cocher et boutons radio

Gabarit (v1.0)

Notes:

• Ne peut être utilisé qu'avec des étiquettes explicites. Si vous devez utiliser une étiquette implicite, reportez-vous au modèle régulier de la WET-BOEW pour les cases à cocher et les boutons radio.

Base : .gc-chckbxrdio

<fieldset class="gc-chckbxrdio">
	<legend>API</legend>
	<ul class="list-unstyled lst-spcd-2">
		<li class="checkbox">
			<input type="checkbox" id="gabarit">
			<label for="gabarit">Gabarit</label>
		</li>
	</ul>
</fieldset>

Variation : Tickbox (.checkbox.gc-chckbxrdio)

<div class="checkbox gc-chckbxrdio">
	<input id="gabarit" type="checkbox"/>
	<label for="gabarit">Gabarit</label>
</div>

Rendu visuel (v1.0)

Base

Cases à cocher et boutons radio

• La largeur et hauteur sont exactement 36 pixels en excluant les bordures;
• Les bordures paraissent relativement épaisses (2 pixels) leurs couleur est noir (#000);
• Il y a un espace blanche (#fff) de 4 pixels entre les bordures et la zone de survol;
• Lorsque survolé, léger fond d'écran en dégradé (#e6e5e5 vers #fff sur l'axe des Y);
• Lors du focus par clavier, aura distingué bleu (#3b99fc) autour du input;
• Lorsque désactivé, opacité est baissé à 50%, apparaissant gris.

Cases à cocher seulement

• Lorsque sélectionné, crochet de 5 pixels d'épais touchent parfaitement les contours de la zone de survol.

Boutons radio seulement

• Le radius des coin est à 50 %, ce qui les rend ronds;
• Lorsque sélectionné, point gris (#444) recouvre l'entièreté de la zone de survol.

Tickbox

Cases à cocher et boutons radio

• La largeur et hauteur sont exactement 24 pixels en excluant les bordures.