Anatomie
- Astérisque
- Libellé
- Infobulle
- Conteneur
- Icône de début
- Valeur
- Tags
- Icône d'effacement
- Icône d'affichage des options
- Texte d'aide
- Texte d'erreur
Champ liste déroulante à sélection unique
Ce champ permet à l'utilisateur de choisir une seule option.
Champ liste déroulante à sélections multiples
Ce champ permet à l'utilisateur de choisir une ou plusieurs options.
Styles
Ces styles sont à utiliser sur des fonds blancs et gris pour permettre un contraste optimal.
Sur un fond blanc
Sur un fond gris
Assistance utilisateur
Les éléments d'assistance fournissent des détails supplémentaires sur le texte saisi dans les champs de saisie.
Texte d'espace réservé
Pour pouvoir identifier rapidement la nature du champ (à choix unique ou multiple), le texte réservé varie en fonction de cette nature là.
Champ de liste déroulante à sélection unique
Champ de liste déroulante à sélection multiple
Infobulle
L'option infobulle permet d'afficher une icône à côté du label qui fournit des informations contextuelles lorsqu'elle est survolée (ou au focus) ou cliquée à l'aide du composant infobulle .
Texte d'aide
Le texte d'aide donne des indications supplémentaires sur le champ saisie, comme la manière dont il sera utilisé. Il ne doit occuper qu'une seule ligne pour simplifier sa compréhension.
Message d'erreur
Le message d'erreur vient apporter des informations supplémentaires à l'utilisateur lors de la complétion ou lors de la validation d'un formulaire.
Tailles
Le champs de sélection sont disponibles en 3 tailles. La taille moyenne est à privilégier pour plus de confort visuel de l'utilisateur.
Petit
Moyen
Grand
États
Les états sont des représentations visuelles utilisées pour communiquer l'état du champ.
Il existent 7 états différents disponibles pour les champs de texte :
Défaut
Renseigné
Actif
L'état actif est déclenché quand l'utilisateur clique sur le champ.
💡 Le menu affiché est un composant à part entière dans le système de design de la CNSA → Menu
Au survol
Désactivé
Erreur
Verrouillé
Responsive
Un champ de liste déroulante est un composant réactif et peut être redimensionné à n'importe quelle dimension nécessaire.
Ces champs peuvent s'étendre sur toute la largeur de l'affichage sur les petits écrans, mais doivent être délimités par des marges flexibles ou d'autres conteneurs sur les écrans plus grands.
De plus ces champs possèdent des tailles minimum.
Assurez-vous que la liste déroulante s'affiche entièrement sur les écrans plus petits.
Alternatives
Champ de liste déroulante à choix unique