Field
Le composite qui fait un champ complet : un libellé, l'input qu'on lui passe en enfant, un texte d'aide. C'est lui qui relie les trois et propage l'erreur.
Utilisation
import { Field } from "@monstera/ui"Tel qu'il figure sur votre pièce d'identité.
Assemblage
Field génère un id, le pose sur l'enfant et y accroche le libellé ; l'aide est reliée par aria-describedby. required et hasTooltip ne décorent que le libellé : l'obligation réelle reste à poser sur le champ.
Facultatif.
N'importe quel champ
Un Select, un Textarea, n'importe quel champ du kit : l'enfant est cloné pour recevoir id, errored, disabled et aria-describedby. Les champs, eux, ne connaissent ni libellé ni aide.
Un IBAN français compte 27 caractères.
Erreur
helper et error visent la même ligne : dès qu'error est défini, le message rouge prend la place de l'aide neutre au lieu de s'y ajouter, et le champ passe en errored.
Rattachée à votre dossier.
Désactivé
disabled descend jusqu'à l'enfant, il ne grise pas le bloc : le libellé et l'aide gardent leur couleur, seul le champ change d'état.
Accessibilité
Field relie le libellé au champ (htmlFor), l'aide et l'erreur par aria-describedby, et annonce l'erreur (role="alert"). Avec required, le champ reçoit aria-required : c'est lui qui dit « obligatoire » à un lecteur d'écran, la pastille du libellé est décorative. L'attribut natif required est écarté, il ferait surgir les bulles de validation du navigateur. Un message d'erreur dit comment corriger, pas seulement ce qui ne va pas.
API
Prop
Type
Digit
La saisie d'un code reçu par SMS ou par mail, une case par chiffre. Le composant gère lui-même le déplacement d'une case à l'autre.
FormHelper
Le texte sous un champ : une aide, une confirmation ou une erreur. Field et BigField le posent tout seuls, on ne l'appelle en direct que hors de ces composites.