Anatomie
Le composant champ de saisie est composé de plusieurs éléments dont certains ne sont visibles qu'en fonction des options de personnalisation choisies.
- Astérisque facultatif
- Label
- Icône infobulle facultatif
- Conteneur
- Icon de début facultatif
- Libellé
- Icône de fin facultatif
- Deuxième icône de fin facultatif
- Icône d'effacement
- Chevron facultatif
- Texte d'aide facultatif
- Icône d'erreur facultatif
- Texte d'erreur facultatif
- Compteur de caractères facultatif
Sur un fond blanc
Cette variante est a utiliser sur des fonds blancs pour permettre un contraste optimal.
Sur un fond gris
Cette variante est a utiliser sur des fonds gris pour permettre un contraste optimal.
Différentes couleurs sont appliquées au texte, à l'arrière-plan, à la bordure et/ou aux icônes, selon l'état et le type de champ de texte utilisé.
Texte
Champ conçu pour l'entrée d'un texte simple.
Temps
Champ conçu pour l'entrée d'une valeur temps.
Champ conçu pour l'entrée d'une adresse e-mail.
Date
Champ conçu pour l'entrée d'une date formaté en JJ/MM/AAAA.
Mot de passe
Champ conçu pour l'entrée d'un mot de passe qui pourrait être masqué ou affiché à l'aide de l'icône de oeil.
Nombre
Champ conçu pour l'entrée d'une valeur numérique.
Zone de texte
💡 La zone de texte est un composant à part entière dans le système de design de la CNSA → Text area
Champ conçu pour l'entrée d'un texte long sur plusieurs lignes.
Tailles
Le champs de saisie sont disponibles en 3 tailles. La taille moyenne est a privilégier pour plus de confort visuel.
États
Les états sont des représentations visuelles utilisées pour communiquer l'état du champ de texte. Chaque état est visuellement similaire et ne modifie pas radicalement un champ de texte, mais est toujours clair afin de pouvoir le distinguer des autres états et de la mise en page environnante.
Il existe 6 états différents disponibles pour les champs de texte :
Responsive
Un champ de texte est un composant réactif et peut être redimensionné à n'importe quelle dimension nécessaire.
Les champs de texte 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.