Formulaires

Identifiants nationaux

المعرفات الوطنيةIdentity input

Bêtasrc/dsm/components/identity-input.tsx
Un champ pour les identifiants que demandent les démarches marocaines — CNIE, ICE, RIB, téléphone — qui filtre les caractères, met en forme pendant la saisie et valide la structure (et la clé du RIB). Les fonctions de validation sont exportées séparément pour le serveur.

Import

import { IdentityInput } from "@/dsm/components/identity-input";

Exemples

Les quatre identifiants

CNIE, ICE, RIB et téléphone, avec validation à la sortie du champ et message d'erreur traduit.

LTR

Tel qu'imprimé au recto de votre carte.

Identifiant commun de l'entreprise, 15 chiffres.

24 chiffres ; la clé est vérifiée.

Numéro national à 10 chiffres.

Contrôlé, avec validité en direct

La valeur normalisée et l'état de validité remontent par `onValueChange`.

LTR

Modifiez le dernier chiffre pour invalider la clé.

RIB
007780000123456789012396 clé OK
E.164
+212612345678

Usage

Quand l'utiliser

  • Utilisez `kind="cnie"` pour la carte nationale d'identité électronique : une ou deux lettres puis 5 à 7 chiffres, capitalisées automatiquement.
  • Utilisez `kind="ice"` (15 chiffres) et `kind="rib"` (24 chiffres, clé vérifiée) dans les démarches entreprises et les remboursements.
  • Utilisez `kind="phone"` pour un numéro national à 10 chiffres ; un numéro collé au format +212 ou 00212 est converti.
  • Validez aussi côté serveur avec `validateIdentity` de `@/dsm/lib/identity` : le composant ne remplace pas la vérification du dossier.

Quand ne pas l'utiliser

  • N'utilisez pas ce champ pour un identifiant dont le format n'est pas garanti (numéros de dossier, références internes) : utilisez `Input`.
  • Ne masquez pas le numéro saisi (pas de type password) : l'usager doit pouvoir relire son identifiant.

Accessibilité & langues

Accessibilité

  • Le champ hérite du câblage de `Field` (libellé, indication, message d'erreur, `aria-invalid`).
  • La validation ne se déclenche qu'à la sortie du champ (`validateOnBlur`), jamais pendant la frappe, pour ne pas annoncer une erreur prématurée.
  • Le clavier adapté est demandé sur mobile (`inputMode` numérique ou téléphone).

RTL & multilingue

  • Les identifiants sont toujours affichés de gauche à droite (`dir="ltr"`) même dans une interface en arabe ; c'est le sens dans lequel ils sont imprimés sur les documents.
  • Les messages d'erreur existent dans les quatre locales via `identityErrorMessage(kind, t)`.

Propriétés

IdentityInput
PropriétéTypeDéfautDescription
kind*"cnie" | "ice" | "rib" | "phone"—Type d'identifiant : filtrage, format, validation et clavier mobile en dépendent.
valuestring—Valeur normalisée (lettres et chiffres uniquement), contrôlée.
defaultValuestring—Valeur initiale (non contrôlé).
onValueChange(raw, { complete, valid, formatted }) => void—Appelé à chaque frappe avec la valeur normalisée et son état de validité.
validateOnBlurbooleantrueMarque le champ invalide à la sortie si la valeur est incomplète ou incorrecte.
invalidboolean—Force l'état invalide (prend le pas sur la validation interne).
…InputPropsInputProps—Taille, icônes, addons et attributs natifs de `Input`.
@/dsm/lib/identity
PropriétéTypeDéfautDescription
validateIdentity(kind, raw){ complete, valid }—Validation pure, utilisable côté serveur.
formatIdentity(kind, raw)string—Mise en forme conventionnelle (groupes de chiffres).
normalizeIdentity(kind, input)string—Ne garde que les caractères admis, en forme canonique.
toInternationalPhone(raw)string—« 0612345678 » → « +212612345678 ».

Composants liés