BricksLab Catalog

@brickslab/ui-web

Champ de saisie contrôlé et généraliste avec support des labels, icônes gauche/droite, textes d'aide et d'erreur, 3 tailles et plusieurs types HTML. Hover et focus gérés via CSS natif sans 'use client'.

Aperçu

champ basique avec placeholder

Tailles

sm (28px) · md (38px) · lg (44px)

Avec icônes

leftIcon · rightIcon · les deux

leftIcon

rightIcon

leftIcon + rightIcon

États

error · disabled · readOnly

error

Ce nom d'utilisateur est déjà pris.

disabled

readOnly

Label et texte d'aide

label · helperText · required (astérisque)

Adresse e-mail

Nous ne partagerons jamais votre e-mail.

Nom d'utilisateur

Types HTML

text · email · password · number · search · url

number

url

Pleine largeur

fullWidth — s'étire à 100% du conteneur

Nom complet

Props

Prop	Type	Défaut	Requis	Description
`value`	`string`	—	✓	Valeur contrôlée du champ.
`onChange`	`(value: string) => void`	—	✓	Callback déclenché à chaque modification, reçoit la valeur string.
`type`	`"text" \| "email" \| "password" \| "number" \| "search" \| "url"`	`"text"`	—	Type HTML natif du champ input.
`label`	`string`	—	—	Label affiché au-dessus du champ, lié via htmlFor.
`placeholder`	`string`	—	—	Texte indicatif affiché lorsque le champ est vide.
`helperText`	`string`	—	—	Texte d'aide affiché sous le champ (en muted). Masqué si errorText est présent.
`errorText`	`string`	—	—	Message d'erreur affiché sous le champ (en rouge). Active aussi la bordure rouge.
`disabled`	`boolean`	`false`	—	Désactive le champ (opacité 0.5, curseur not-allowed).
`readOnly`	`boolean`	`false`	—	Rend le champ en lecture seule.
`leftIcon`	`React.ReactNode`	—	—	Icône positionnée à gauche à l'intérieur du champ.
`rightIcon`	`React.ReactNode`	—	—	Icône positionnée à droite à l'intérieur du champ.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	—	Taille du champ (hauteur, padding, taille de police).
`fullWidth`	`boolean`	`false`	—	Étire le champ à 100% de la largeur du conteneur.
`id`	`string`	—	—	ID HTML du champ. Auto-généré via React.useId() si non fourni.
`name`	`string`	—	—	Nom du champ pour les formulaires HTML natifs.
`required`	`boolean`	`false`	—	Marque le champ comme requis (astérisque rouge sur le label).
`autoFocus`	`boolean`	`false`	—	Donne le focus au champ au montage.
`maxLength`	`number`	—	—	Nombre maximum de caractères autorisés.

Utilisation

tsx

import { Input } from "@brickslab/ui-web";
import { FiMail, FiSearch } from "react-icons/fi";

// Basique
<Input value={val} onChange={setVal} placeholder="Texte..." />

// Avec label et helper
<Input
  value={email}
  onChange={setEmail}
  label="Adresse e-mail"
  helperText="Nous ne partagerons jamais votre e-mail."
  type="email"
/>

// Erreur
<Input
  value={val}
  onChange={setVal}
  label="Nom d'utilisateur"
  errorText="Ce nom est déjà utilisé."
/>

// Avec icônes
<Input
  value={search}
  onChange={setSearch}
  leftIcon={<FiSearch />}
  placeholder="Rechercher..."
/>

// Tailles
<Input size="sm" value={v} onChange={setV} placeholder="sm" />
<Input size="md" value={v} onChange={setV} placeholder="md" />
<Input size="lg" value={v} onChange={setV} placeholder="lg" />

// Full width
<Input fullWidth value={v} onChange={setV} placeholder="Pleine largeur" />