Sélectionnez une case à cocher :
Case à cocher désactivée :
Sélectionnez une case à cocher :
Les cases à cocher permettent aux utilisateurs de sélectionner plusieurs options à partir d’une seule liste. Une case à cocher seule permet à l’utilisateur d’activer ou de désactiver une option.
Sélectionnez une case à cocher :
Case à cocher désactivée :
Sélectionnez une case à cocher :
Utilisez le code ci-dessous pour ajouter cet élément à votre projet. Téléchargez la dernière version de la bibliothèque pour implémenter facilement notre ensemble complet d’éléments.
Effectuez la commande suivante pour installer ce composant.
Importer les éléments suivants dans votre dossier app.module.ts.
<div role="group" aria-labelledby="checkbox-names foo"> <p id="checkbox-names">Select a checkbox:</p> <cpc-ds-checkbox *ngFor="let country of countries; let i=index" formArrayName="selectedCountries" id="country_{{i}}" [text]="country.name" [value]="country.value" [checked]="i !== 2 ? false : true" [disabled]="i === 3 ? true : false" (change)="onCheckboxChange($event)"> </cpc-ds-checkbox> <div id="foo" class="ds-error">You must select an option</div> </div>
Nom | Type | Défaut | Description |
---|---|---|---|
id | string | checkbox-id |
Identifiant de la case à cocher. L’identifiant est le même que le nom de la case à cocher. |
text | string | Checkbox text here |
L’étiquette de la case à cocher. |
value | string | Checkbox value |
La valeur de la case à cocher. |
checked | boolean | false |
Indiquez que la case est cochée à l’aide de la variable "true" (vrai). Indiquez que la case n’est pas cochée à l’aide de la variable "false" (faux). |
disabled | boolean | false |
Désactivez la case à cocher avec la variable "true" (vrai) Activez la case à cocher avec la variable "false" (faux). |
(change) | Method |
Appelez une méthode si vous voulez saisir la valeur pour effectuer une action. (change)="onCheckboxChange($event)" |
Importez l’URL suivante dans votre thème ou votre page.
<script src="[JS-PLACE-HOLDER]"></script>
<div role="group" aria-labelledby="checkbox-names fooCheckbox"> <p class="checkbox" id="checkbox-names">Select a checkbox:</p> <div class="checkbox-container"> <input id="oneCheckbox" class="by-keyboard" type="checkbox"> <label for="oneCheckbox">One</label> </div> <div class="checkbox-container"> <input id="twoCheckbox" class="by-keyboard" type="checkbox"> <label for="twoCheckbox">Two</label> </div> </div>
Une case à cocher permet à l’utilisateur de sélectionner des options sans en désélectionner d’autres. Elle comprend une icône de case à cocher et une étiquette décrivant la sélection. Si l’objectif est que l’utilisateur fasse un seul choix, consultez la section sur les boutons radio.
Les cases à cocher sont disposées comme des listes. Les étiquettes des cases à cocher s’affichent toujours à droite de chaque case à cocher.
Si le texte d’une case à cocher est long et qu’il risque de passer à la ligne suivante dans les petits écrans, assurez-vous que les autres lignes s’alignent sous la première lettre du texte, et non sous la case à cocher. Lorsque le texte passe à la ligne suivante, alignez les cases à cocher à la verticale avec la première ligne du texte.
Toute la case à cocher et la zone de l’étiquette sont interactives. Les cases à cocher peuvent avoir les états suivants :
Lorsqu’il y a une erreur, le message s’affiche sous la dernière case à cocher.
Les états de mise en évidence des cases à cocher permettent aux utilisateurs de naviguer sans souris entre les options. Pour fournir de la visibilité et du contexte, l’état de mise en évidence doit couvrir toute la ligne, et non seulement la case à cocher.
L’utilisateur peut naviguer entre les options de cases à cocher à l’aide de la touche de tabulation, et cocher et décocher les cases à l’aide de la barre d’espacement.
Les lecteurs d’écran doivent annoncer l’élément comme une case à cocher et l’étiquette qui lui est associée.
Avec le même en-tête, utilisez <jeu de champs>
pour regrouper les cases à cocher. Les lecteurs d’écran annonceront le groupe de cases à cocher selon l’étiquette de jeu de champs que vous avez désignée.
Une case à cocher permet à l’utilisateur de sélectionner des options sans en désélectionner d’autres. Elle comprend une case à cocher et une étiquette décrivant la sélection. Si l’objectif est que l’utilisateur fasse un seul choix, consultez la section sur les boutons radio.
Une case à cocher est interactive et permet à l’utilisateur de la sélectionner ou de la désélectionner en un clic. Le contenu s’affiche à la droite de la case à cocher.
Au moment de la rédaction des cases à cocher, les messages d’erreur indiquent à l’utilisateur ce qu’il doit faire pour effectuer la tâche. Le message d’erreur s’affiche sous la dernière case à cocher.
Lignes directrices | Exemples | |
---|---|---|
Longueur recommandée | Suffisante pour que l’idée soit claire, mais essayez de vous en tenir à une seule ligne | |
Saut de ligne | Limiter l’utilisation; le texte doit être sur la même ligne que la case et non pas dessous | |
Formulation | Phrases courtes expliquant chaque élément | |
Majuscule | Majuscule en début de phrase |
Utilisez une majuscule en début de phrase pour faciliter la lisibilité.
Privilégiez des descriptions courtes pour chaque case à cocher; ce sera plus clair et dégagé.
Utilisez des mots positifs et actifs dans les étiquettes des cases à cocher afin d’expliquer clairement ce qui se produira si l’utilisateur clique sur celles-ci. Évitez les tournures négatives pour les cases d’activation et de désactivation, car elles peuvent confondre l’utilisateur.
Veuillez noter que ce composant pourrait nécessiter un élément de style supplémentaire.
<mat-checkbox>
offre la même fonctionnalité que l’élément <input type="checkbox">
natif perfectionné avec un style de motif d’article et des animations.
Veuillez noter que ce composant pourrait nécessiter un élément de style supplémentaire.
Les cases à cocher sont une fonctionnalité prête à l’emploi.
Vous n’avez qu’à sélectionner l’option de case à cocher dans la trousse d’outils à droite.
Les styles de cases à cocher devraient être appliqués automatiquement ainsi que les styles de leurs états d’erreur.
La trousse d’outils Mendix se trouve ici.
Lorsque la case à cocher est mise en évidence :
La mise en évidence est toujours sur la case à cocher une fois que son état a changé.
Le composant de la case à cocher peut avoir les propriétés ARIA suivantes :
Au moment de tester une case à cocher, le testeur doit s’assurer de ce qui suit :