FieldContainer

Conteneur de champ de formulaire avec espacement cohérent. Utilisé pour wrapper un Label et son Input / Select /Textareaafin d'assurer une disposition verticale homogène dans tout le formulaire.

Démo en direct — formulaire d'enregistrement

Nom complet

Rôle

Chaque groupe (Label + contrôle) est encapsulé dans un FieldContainer pour un espacement cohérent.

Code source complet — copier-coller

Exemple complet d'un formulaire avec FieldContainer, Label, Input et Select.

"use client";

import { useState } from "react";
import { FieldContainer, Label, Input, Select } from "@ramses1er/cbk-toolkit/client";

export default function RegisterForm() {
  const [fullname, setFullname] = useState("");
  const [email, setEmail] = useState("");
  const [role, setRole] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Appel API...
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-3">
      <FieldContainer>
        <Label>Nom complet</Label>
        <Input
          type="text"
          placeholder="Saisissez le nom"
          value={fullname}
          onChange={(e) => setFullname(e.target.value)}
        />
      </FieldContainer>

      <FieldContainer>
        <Label>Email</Label>
        <Input
          type="email"
          placeholder="Saisissez l'email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </FieldContainer>

      <FieldContainer>
        <Label>Rôle</Label>
        <Select
          value={role}
          onChange={(e) => setRole(e.target.value)}
        >
          <option value="">Choisissez le rôle</option>
          <option value="admin">Administrateur</option>
          <option value="user">Utilisateur</option>
        </Select>
      </FieldContainer>

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

Utilisation — avec le composant Form

Pattern standard dans les projets d'administration : combiner Form et FieldContainer pour bénéficier de la gestion d'erreur intégrée et de l'espacement cohérent.

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

function CreateUserForm() {
  const createUser = useCreateUser();
  const [form, setForm] = useState({ ... });

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

  return (
    <Form
      onSubmit={handleSubmit}
      erreurs={createUser.error}
      onErrorClose={createUser.reset}
    >
      <FieldContainer>
        <Label>Nom complet</Label>
        <Input
          type="text"
          value={form.fullname}
          onChange={(e) => setForm({ ...form, fullname: e.target.value })}
        />
      </FieldContainer>

      <FieldContainer>
        <Label>Email</Label>
        <Input
          type="email"
          value={form.email}
          onChange={(e) => setForm({ ...form, email: e.target.value })}
        />
      </FieldContainer>
    </Form>
  );
}

Props

Prop	Type	Défaut	Description
children	ReactNode	requis	Contenu du champ (Label + contrôle)
className	string	—	Classes Tailwind supplémentaires

Comportement

Le conteneur externe a les classes flex flex-col gap-2 mb-3 relative
Un conteneur interne avec flex flex-col gap-1 wrap les children
Garantit un espacement vertical homogène entre chaque champ d'un formulaire
S'utilise généralement avec Label, Input, Select ou Textarea
Peut contenir n'importe quel ReactNode(ex: bouton submit, message d'aide)