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.
Utilisation
import { Digit } from "@monstera/ui"Par défaut
Six cases. La frappe avance seule à la suivante, le retour arrière revient à la précédente, les flèches naviguent, et un code collé se répartit sur les cases d'un coup. Seuls les chiffres passent, y compris au collage.
Longueur et masquage
length règle le nombre de cases, hidden remplace chaque chiffre saisi par un point. Une case encore vide garde son tiret gris.
Ce code ne correspond pas à celui que nous avons envoyé.
Erreur
errored ne repeint que les cases. Digit n'expose ni id ni aria-describedby, il ne s'assemble donc pas avec Field : son libellé accessible passe par la prop label, et le message se pose à côté, ici avec un FormHelper.
Accessibilité
Les cases forment un groupe nommé (« Code de sécurité »), et chacune porte son rang. En hidden, la valeur n'est pas lue.
API
Prop
Type
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.
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.