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
- Icon de début facultatif
- Texte d'aide facultatif
- Icône d'erreur facultatif
- Texte d'erreur facultatif
- Libellé
- Icône d'effacement
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é.
Sur un fond contrasté
Cette variante est a utiliser sur des fonds vert 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é.
Version sans label
La recherche peut fonctionner sans label, l'icône pouvant servir à comprendre le rôle du champ. Dans le cas d'un champ sans libellé, un titre devra être fourni pour les technologies d'assistance, dont la valeur sera similaire au placeholder du champ, s'il existe.
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.