Input

Apercu

Le composant Input de packages/ui est un wrapper style autour de l'element natif <input>. Il fournit un style coherent, des anneaux de focus et un etat d'erreur.

Import

import { Input } from "@saas/ui";

Utilisation de base

<Input type="email" placeholder="you@example.com" />

Types

Le composant prend en charge tous les types d'input HTML standard :

<Input type="text" placeholder="Full name" />
<Input type="email" placeholder="you@example.com" />
<Input type="password" placeholder="Password" />
<Input type="number" placeholder="0" />
<Input type="url" placeholder="https://..." />
<Input type="search" placeholder="Search..." />

Etat d'erreur

Affichez les erreurs de validation en combinant le champ avec un message d'erreur :

<div>
  <Input
    type="email"
    placeholder="you@example.com"
    className="border-red-500 focus-visible:ring-red-500"
    aria-invalid="true"
  />
  <p className="mt-1 text-sm text-red-500">Please enter a valid email address.</p>
</div>

Ajoutez les classes border-red-500 et focus-visible:ring-red-500 pour indiquer visuellement l'erreur.

Avec des labels

Associez toujours les champs de saisie a des labels pour l'accessibilite :

<div className="space-y-2">
  <label htmlFor="email" className="text-sm font-medium text-gray-700">
    Email
  </label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>

Input controle

const [value, setValue] = useState("");

<Input
  value={value}
  onChange={(e) => setValue(e.target.value)}
  placeholder="Type here..."
/>

Etat desactive

<Input disabled placeholder="Cannot edit" />

Le champ est visuellement attenue et non interactif lorsque disabled est defini.

Props

Tous les attributs HTML standard de <input> sont egalement acceptes (par ex. onChange, value, name, required, aria-*).

Styles par defaut

Conseils

• Utilisez type="search" pour les champs de recherche ; certains navigateurs ajoutent automatiquement un bouton d'effacement.
• Pour le telechargement de fichiers, utilisez type="file" mais envisagez une zone de depot personnalisee pour une meilleure experience utilisateur.
• Combinez avec une bibliotheque de formulaires comme React Hook Form pour la validation et la gestion de la soumission.