Aller au contenu principal

Formulaires

Problème​

Un formulaire doit guider l'utilisateur sans le bloquer : labels clairs, erreurs localisées, soumission non-ambiguë (loading + désactivé), et reset propre après succès.

Composants utilisés​

  • PasswordForm, ProfileForm (formulaires paramètres)
  • NewAccountModal, ManualSnapshotModal (formulaires en dialog)
  • Inputs natifs stylés via Tailwind + tokens CSS (var(--color-border), focus ring)

Structure standard​

<form onSubmit={handleSubmit} className="space-y-4">
  <div className="space-y-2">
    <label htmlFor="name" className="text-xs font-medium uppercase tracking-wider text-muted">
      Nom
    </label>
    <input
      id="name"
      name="name"
      required
      className="w-full rounded-lg border border-[var(--color-border)] bg-transparent px-3 py-2"
    />
    {error && <p className="text-sm text-[var(--color-negative)]">{error}</p>}
  </div>

  <button type="submit" disabled={loading} className="...">
    {loading ? <Loader2 size={16} className="animate-spin" /> : 'Enregistrer'}
  </button>
</form>

Règles​

  • Label toujours visible au-dessus de l'input (pas de placeholder-as-label)
  • Bouton submit désactivé pendant la soumission + spinner Loader2
  • Validation côté serveur (Zod dans Server Action) = source de vérité — le client peut dupliquer pour UX, mais jamais à la place
  • Erreurs localisées sous le champ concerné, en text-[var(--color-negative)]
  • Focus ring obligatoire sur input/bouton (voir Accessibilité)
  • Gap vertical : space-y-4 entre champs, space-y-2 entre label et input

À ne pas faire​

  • Placeholder utilisé comme label (disparaît à la saisie, inaccessible)
  • Bouton submit actif pendant la soumission (double-submit possible)
  • Message d'erreur générique global ("une erreur est survenue") quand le champ fautif est identifiable

Voir aussi​