Create Next App

CatBut — Input.tsxdefault · outlined · ghost

Input.tsx

Variants

variant="default" | "outlined" | "ghost"

Default

Outlined

Ghost

Input.tsx

Sizes

size="sm" | "md" | "lg"

Small

Medium

Large

Input.tsx

Icônes

icon (gauche) — iconRight (droite)

Recherche

Utilisateur

Mot de passe

Site web

Tag (sm)

Tag (lg)

Input.tsx

Mot de passe (isPassword)

isPassword — toggle Eye/EyeOff automatique

Mot de passe

Mot de passe (outlined lg)

Input.tsx

États

error / success / hint / disabled / readOnly

Erreur

Ce champ est requis

Succès

Hint

Entre 3 et 20 caractères

Disabled

ReadOnly

combinaisons error + icône

Email invalide

Pseudo

Input.tsx

Types HTML natifs

type="number" | "date" | "color" | "range" | "url"

Nombre

Date

Couleur

URL

Input.tsx

Exemples de cas réels

barre de recherche

formulaire d'inscription — validation

Nom d'utilisateur

Entre 3 et 20 caractères

Mot de passe

8 caractères minimum

filtres de dashboard (ghost + sm)

CatBut · Input.tsx · default · outlined · ghost · sm · md · lg · icon · error · success · hint · disabled · isPassword