Input

Champ de saisie avec ref forwarding et support de toutes les props HTML natives. Inclut un bouton d'affichage/masquage du mot de passe quand type="password".

Démo en direct — les différents types

Texte

Mot de passe

Cliquez sur l'icône à droite pour afficher/masquer

Le champ password affiche automatiquement un bouton “voir/masquer”.

Code source complet — copier-coller

Exemple complet d'un formulaire de connexion avec Input type text, email et password.

"use client";

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

export default function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

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

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label className="font-semibold text-gray-600 block">Email</label>
        <Input
          type="email"
          placeholder="votre@email.com"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>

      <div>
        <label className="font-semibold text-gray-600 block">
          Mot de passe
        </label>
        <Input
          type="password"
          placeholder="********"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>

      <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"
      >
        Se connecter
      </button>
    </form>
  );
}

Utilisation — avec FieldContainer et Label

Pattern standard dans les projets d'administration : combiner FieldContainer , Label et Input pour des formulaires homogènes.

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

<FieldContainer>
  <Label>Nom complet</Label>
  <Input
    type="text"
    placeholder="Saisissez le nom"
    value={form.fullname}
    onChange={(e) => setForm({ ...form, fullname: e.target.value })}
  />
</FieldContainer>

Props

Prop	Type	Défaut	Description
type	string (HTMLInputTypeAttribute)	—	Type du champ. `password` ajoute un bouton voir/masquer
className	string	—	Classes Tailwind supplémentaires
ref	React.Ref<HTMLInputElement>	—	Ref forwarding vers l'élément `<input>` natif
...props	InputHTMLAttributes	—	Toutes les props HTML natives du champ input (placeholder, value, onChange, disabled, etc.)

Comportement

Supporte le ref forwardingpour un accès direct au DOM
Quand type="password", un bouton avec l'icône Eye / EyeOffapparaît à droite
Le bouton password toggle est en position absolue à l'intérieur du conteneur, avec un padding droit de 10px sur l'input pour éviter la superposition
Un padding droit (pr-10) est appliqué à l'input pour laisser la place à l'icône
Les classes de base incluent le focus ring, les bordures arrondies et la transition