Champ de texte

حقل نصيText input

Stablesrc/dsm/components/input.tsx

Contrôle de saisie de texte natif partagé par tous les formulaires du DSM : bordure, focus, états invalide et désactivé sont cohérents entre `Input`, `Textarea` et `PasswordInput`. Icônes et affixes textuels (« MAD », « +212 ») s'insèrent sans casser l'alignement du texte.

Import

import { Input } from "@/dsm/components/input";

Exemples

Champ simple et affixes

Saisie de base, puis avec un affixe textuel (« MAD », « +212 »).

LTR

Nom de la démarche

Utilisé pour retrouver votre dossier.

Montant des droits de timbre

MAD

Numéro de téléphone

+212

Tailles

Les trois hauteurs disponibles : sm, md, lg.

LTR

États

Invalide, désactivé et lecture seule.

LTR

Numéro d'AMO

Ce numéro d'affiliation est introuvable.

Régime d'affiliation

Identifiant de dossier

Attribué automatiquement, non modifiable.

Zone de texte et mot de passe

`Textarea` avec compteur de caractères et `PasswordInput` avec bascule de visibilité.

LTR

Motif de la demande

Décrivez brièvement l'objet de votre requête.

280 caractères restants

Mot de passe

Usage

Quand l'utiliser

Utilisez `Input` pour toute saisie sur une ligne : texte, nombre, e-mail, téléphone, recherche simple.
Utilisez `addonStart`/`addonEnd` pour un préfixe ou suffixe textuel fixe (unité, indicatif) plutôt que de l'inclure dans le `placeholder`.
Utilisez `Textarea` pour un texte libre de plusieurs lignes, avec `maxLength` si le champ alimente un système ayant une limite de caractères.
Utilisez `PasswordInput` pour tout mot de passe ou code secret afin d'offrir le bouton d'affichage/masquage.

Quand ne pas l'utiliser

N'utilisez pas `Input` pour un choix parmi une liste fermée : préférez `Select` ou `RadioGroup`.
Ne mettez pas d'information obligatoire uniquement dans le `placeholder` : elle disparaît dès la saisie, utilisez `Field` avec `hint` ou `required`.

Accessibilité & langues

Accessibilité

Toujours envelopper le contrôle dans `Field` (ou lui fournir un `<label>` explicite) : `Input` seul n'a pas de nom accessible.
L'anneau de focus est déplacé sur le conteneur du champ (pas sur le texte) afin de rester net même avec des icônes ou affixes.
`Textarea` annonce le compteur de caractères restants avec `aria-live="polite"`, sans interrompre la saisie.
`PasswordInput` porte un `aria-label` explicite (« Afficher/Masquer le mot de passe ») sur le bouton bascule, jamais une icône seule sans texte alternatif.

RTL & multilingue

Les paddings utilisent `ps-*`/`pe-*` : les icônes et affixes changent de côté automatiquement en arabe.
Les bordures d'affixe utilisent `border-s`/`border-e`, jamais `border-l`/`border-r`.

Propriétés

Input

Propriété	Type	Défaut	Description
size	"sm" \| "md" \| "lg"	md	Hauteur du champ : 36px, 44px ou 52px.
invalid	boolean	—	Applique l'anneau et le focus en ton d'erreur.
iconStart / iconEnd	ReactNode	—	Icône décorative insérée avant ou après le texte.
addonStart / addonEnd	ReactNode	—	Affixe textuel dans un encart teinté (unité, indicatif téléphonique…).
disabled / readOnly	boolean	—	États standards du champ natif, stylés de façon cohérente.

Textarea

Propriété	Type	Défaut	Description
rows	number	4	Nombre de lignes visibles initialement.
maxLength	number	—	Active un compteur « n caractères restants » sous le champ.
invalid	boolean	—	Applique l'anneau en ton d'erreur.

PasswordInput

Propriété	Type	Défaut	Description
…	InputProps	—	Accepte toutes les props d'`Input` sauf `type` et `iconEnd`, réservées à la bascule de visibilité.