Textfield
La saisie de texte sur une ligne. Le libellé, le champ et le texte d'aide sont assemblés par Field, qui relie les trois et propage l'erreur au champ.
Utilisation
import { Textfield } from "@monstera/ui"Nous l'utilisons pour vous envoyer votre contrat.
Champ simple
Field empile le libellé, le champ et le texte d'aide. Le champ est contrôlé : sa valeur remonte par onValueChange.
Cette adresse est incomplète.
Erreur
Un message dans error suffit : le champ passe en rouge avec son icône d'alerte, et le texte d'aide devient le message. Il remplace l'aide neutre au lieu de s'y ajouter.
Ce champ est rempli à partir de votre dossier.
Désactivé
Le champ désactivé prend un fond grisé et perd son action de droite. Le libellé et le texte d'aide restent en place.
Dire pourquoi un champ est fermé
Un champ désactivé se grise et cesse de répondre, mais il ne porte aucun glyphe qui expliquerait le blocage : la maquette n'en prévoit pas, ni ici, ni sur Select, ni sur Textarea.
Monstera répond à la question autrement : sur grand écran, une info-bulle descriptive se déclenche au survol du champ inactif et dit la raison. Elle se pose côté écran, autour du champ, avec le composant Tooltip. Sur mobile, où le survol n'existe pas, la raison doit passer par le texte d'aide ou par la phrase qui précède le formulaire.
C'est aussi pour ça qu'on ne masque pas un champ devenu indisponible : le laisser visible et désactivé, avec sa raison, vaut mieux que de le faire disparaître.
Tooltip
La bulle brève, à déclencher au survol comme au focus.
API
Prop
Type