BigFieldNon officiel
La saisie d'un montant présentée en carte : une grande valeur, son unité collée, et de quoi l'aider (aide, erreur, raccourcis). Le champ porte la question centrale d'un écran, pas une ligne de formulaire.
Utilisation
import { BigField, BigTextfield } from "@monstera/ui"Entre 1 000 € et 75 000 €.
Par défaut
La valeur prend la largeur de ce qu'elle affiche, l'unité reste collée au dernier chiffre. Un pointillé la souligne sur cette largeur exactement : c'est ce qui la donne à lire comme un champ et non comme un résultat, avant même qu'on l'ait touchée. Il fonce quand le champ a la main, et dit ainsi laquelle des deux valeurs de la carte a le focus, là où l'anneau, porté par la carte entière, ne le dit pas. Sur un champ vide il s'arrête au texte d'exemple : ni l'espace qui sépare un nombre de son unité ni l'unité masquée ne sont soulignés, puisqu'il n'y a rien à séparer. Quitter le champ en l'ayant vidé rétablit la valeur d'avant l'édition : effacer fait partie de la saisie, un montant vide n'est pas un état à laisser derrière.
Les raccourcis se replient dès que le champ porte une valeur.
Raccourcis
Les pastilles remplissent le champ sans lui prendre le focus, donc sans refermer le clavier du téléphone. La rangée file jusqu'aux bords de la carte et défile ; un dégradé sur son bord droit dit qu'il reste des pastilles à voir, et s'éteint aussi bien quand tout tient que quand on est arrivé au bout. current allume la pastille égale à la valeur : à ne poser que si le champ est vraiment un choix parmi ces valeurs-là. Une pastille allumée parmi cinq donne à la rangée la grammaire d'un groupe radio, et la valeur au-dessus se lit alors comme son affichage ; sur un champ libre, laisser current à null. collapsed replie la rangée sans la démonter : sa hauteur s'anime jusqu'à zéro, et ce qui la suit ne remonte pas d'un coup sous un doigt déjà posé.
Entre 1 000 € et 75 000 €.
Ce montant dépasse le plafond de 75 000 €.
Erreur
error repeint l'anneau de la carte et remplace l'aide par son message. errored fait l'anneau seul, sans message ni aide : pour quand l'appelant présente l'erreur lui-même, typiquement une Alert passée en notice.
Le point du pavé numérique devient une virgule.
Format décimal
format « decimal » accepte un séparateur unique et le normalise en virgule ; « integer », le défaut, ne laisse passer que des chiffres. Le filtre s'applique au collage comme à la frappe, et le clavier du téléphone suit le format.
De 150 € à 600 €
Deux valeurs
secondary pose une seconde valeur en face de la principale ; lead dit laquelle des deux mène. Celle qui mène prend la grande taille et la largeur qui reste, avec son aide juste dessous ; l'autre s'empile à droite, son libellé au-dessus de sa valeur. Les deux colonnes se posent sur le même bas de boîte, ce qui amène « 36 mois » au ras de l'aide qui lui fait face. Les deux nombres partagent la graisse : c'est la taille seule qui dit lequel commande. Permuter ne change que des classes, jamais l'ordre DOM : réordonner les nœuds ferait perdre le focus au champ en cours de saisie et refermerait le clavier du téléphone. cornerAction prend place sur la ligne du libellé, où elle ne croise ni l'une ni l'autre valeur.
BigTextfield seul
Le champ sans sa carte : valeur en gras, suffixe, croix d'effacement quand il est rempli. C'est lui que BigField habille d'un libellé, d'une aide et de raccourcis.
Accessibilité
Le libellé est relié au champ, l'erreur est annoncée et reliée. required pose aria-required sur le champ. Le dessin ne prévoit pas de marque visible du caractère obligatoire : à signaler dans l'écran (« Tous les champs sont obligatoires ») tant que la question n'est pas tranchée avec l'équipe Monstera.
En mode deux valeurs, l'ordre de tabulation suit l'ordre visuel : le champ qui mène vient en premier. Quand lead change pendant qu'un champ a le focus, le DOM attend le blur de ce champ pour permuter : le clavier mobile ne se referme pas, et l'ordre se rétablit dès que le focus est posé ailleurs.
API
BigField
Prop
Type
BigTextfield
Prop
Type
Link
Le lien texte : un ancrage souligné, en SemiBold, qui emmène ailleurs. Pour déclencher une action plutôt que naviguer, c'est Button en variante ghost.
Checkbox
La case à cocher. Checkbox pose la case et son libellé côte à côte, CheckboxItem donne la case nue quand la mise en page fournit déjà le texte.