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
- Texte d'aide facultatif
- Texte d'erreur facultatif
- Libellé
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é.
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 5 états différents disponibles pour l’input OTP :
