Sélection de la langue

Recherche


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

Utiliser quand

  • Vous désirez avoir des cases à cocher et/ou boutons radio plus grand que ce qui est nativement offert par les navigateurs vous avez lu les recommendations de la Configuration de conception de Canada.ca;
  • Vos balises input sont explicites, dans le sens que les balises input sont adjacentes à leurs balises label associées.

Ne pas utiliser quand

  • Vous avez des cases à cocher et/ou boutons radio implicites, c'est-à-dire que les balises input se retrouvent à l'intérieur de leurs balises label respectives;
  • Votre scénario se retrouve dans la section Quoi éviter.

Comment mettre en œuvre

Exemples pratiques

Évaluation et rapport

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

API (Version 1.0)

Classe CSS Gabarit Rendu visuel Schema
Version 1.0 Version 1.0 Version 1.0 s.o.

Classe CSS (v1.0)

gc-chckbxrdio
Composant : Cases à cocher et boutons radio
Notes sur les versions
Version 1.0 (v8.0)
  • Crée : .gc-chckbxrdio

Gabarit (v1.0)

Notes:

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.
Notes sur les versions
Version 1.0
  • Rendu original

Détails de la page

Date de modification :