Form

Conteneur de formulaire avec gestion d'erreur intégrée. Affiche une bannière rouge avec un compte à rebours de 10s et un bouton de fermeture. Idéal pour les formulaires d'administration avec mutations API.

Démo en direct — formulaire de connexion

Laissez un champ vide et soumettez pour voir la bannière d'erreur avec le countdown de 10s.

Code source complet — copier-coller

Exemple complet d'un formulaire de connexion avec gestion d'erreur.

"use client";

import { useState } from "react";
import { Form } from "@ramses1er/cbk-toolkit/client";
import type { ApiError } from "@ramses1er/cbk-toolkit/client";

export default function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<ApiError | null>(null);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!email || !password) {
      setError(new ApiError({ message: "Veuillez remplir tous les champs", status: 400 }));
      return;
    }
    // Appel API...
    alert("Connexion réussie !");
  };

  return (
    <Form
      onSubmit={handleSubmit}
      erreurs={error}
      onErrorClose={() => setError(null)}
    >
      <div className="flex flex-col gap-2 mb-3">
        <label className="font-semibold text-gray-600">Email</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="votre@email.com"
          className="w-full px-3 py-2 border border-gray-300 rounded-md
                     focus:outline-none focus:ring-2 focus:ring-gray-500
                     focus:border-transparent transition duration-200"
        />
      </div>

      <div className="flex flex-col gap-2 mb-3">
        <label className="font-semibold text-gray-600">Mot de passe</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="********"
          className="w-full px-3 py-2 border border-gray-300 rounded-md
                     focus:outline-none focus:ring-2 focus:ring-gray-500
                     focus:border-transparent transition duration-200"
        />
      </div>

      <button
        type="submit"
        className="w-full px-4 py-2 bg-blue-500 text-white rounded-lg
                   hover:bg-blue-600 transition-colors cursor-pointer font-medium"
      >
        Se connecter
      </button>
    </Form>
  );
}

Utilisation — avec mutation API (TanStack Query)

Pattern standard dans les projets d'administration : passer mutation.error et mutation.reset directement à Form.

import { Form } from "@ramses1er/cbk-toolkit/client";
import { useCreateUser } from "../hooks/use-create-user";

function CreateUserForm() {
  const createUser = useCreateUser();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    createUser.mutateAsync(formData);
  };

  return (
    <Form
      onSubmit={handleSubmit}
      erreurs={createUser.error}
      onErrorClose={createUser.reset}
    >
      {/* ... champs du formulaire ... */}
    </Form>
  );
}

Props

Prop	Type	Défaut	Description
onSubmit	React.FormEventHandler	requis	Handler de soumission du formulaire
erreurs	ApiError \| null	null	Déclenche une bannière rouge avec countdown de 10s
onErrorClose	() => void	—	Callback appelé quand l'erreur est fermée ou expirée
className	string	—	Classes Tailwind supplémentaires (le form a déjà `flex flex-col gap-3`)
children	ReactNode	requis	Contenu du formulaire

Comportement

Le <form> a les classes de base flex flex-col gap-3
La bannière d'erreur apparaît en haut de la page (position fixed) avec un fond rouge
Un countdown de 10s est déclenché à l'apparition de la bannière
Quand le countdown atteint 0, la bannière se ferme et onErrorClose est appelé automatiquement
L'utilisateur peut fermer la bannière manuellement en cliquant sur le X
Le gestionnaire d'intervalle est nettoyé au démontage pour éviter les fuites mémoire
Toutes les props HTML natives du <form>sont supportées (action, method, noValidate, etc.)