Champ de saisie

Libellé, texte d’aide, champ texte ou multiligne, états de validation et champ avec icône pour les formulaires des services publics.

Exemple par défaut

NomVotre nom complet tel qu’il apparaît sur vos documents officiels

<div class="bj-input-group">
  <label class="bj-label" for="ex1">Nom</label>
  <span class="bj-hint">Votre nom complet tel qu'il apparaît sur vos documents officiels</span>
  <input class="bj-input" type="text" id="ex1">
</div>

Types de champ (<code>type</code>)

Les classes bj-input s’appliquent à tout input ou textarea ; le comportement (clavier, validation native) vient de l’attribut type HTML.

Courriel

Montant

Mot de passe

Téléphone

Site web

<!-- Les classes restent identiques ; seul type change -->
<input class="bj-input" type="email" inputmode="email" autocomplete="email" placeholder="vous@exemple.bj">
<input class="bj-input" type="number" inputmode="decimal" placeholder="0">
<input class="bj-input" type="password" autocomplete="current-password" placeholder="Mot de passe">
<input class="bj-input" type="tel" inputmode="tel" autocomplete="tel" placeholder="+229 …">
<input class="bj-input" type="url" inputmode="url" autocomplete="url" placeholder="https://…">

Tailles (<code>bj-input--sm</code>)

Par défaut, la taille correspond au gabarit médium (sans modificateur). bj-input--sm compacte le padding et la taille de police.

Par défaut (md)

Compact (sm)

Textarea sm

<!-- md (défaut) : classe bj-input seule -->
<input class="bj-input" type="text" placeholder="Taille par défaut">
<!-- sm -->
<input class="bj-input bj-input--sm" type="text" placeholder="Taille compacte">
<textarea class="bj-input bj-input--sm" rows="3" placeholder="Zone compacte"></textarea>

Message informatif

Sans modificateur sur le groupe, un retour neutre utilise bj-message bj-message--info (équivalent à l’état default du composant Vue).

Identifiant fiscal

Ce champ est prérempli à partir de votre profil.

<div class="bj-input-group">
  <label class="bj-label" for="ex-info">Identifiant fiscal</label>
  <input class="bj-input" type="text" id="ex-info" aria-describedby="ex-info-msg">
  <p id="ex-info-msg" class="bj-message bj-message--info" role="status">Ce champ est prérempli à partir de votre profil.</p>
</div>

États de validation

N° IFU

Numéro enregistré et vérifié.

Date de naissance

Format attendu : JJ/MM/AAAA.

Code (compact)

Validé.

Champ (compact)

Saisie invalide.

<!-- Succès -->
<div class="bj-input-group bj-input-group--valid">
  <label class="bj-label" for="ifu">N° IFU</label>
  <input class="bj-input" id="ifu" type="text" aria-describedby="msg-ok">
  <p class="bj-message bj-message--valid" id="msg-ok" role="status">Numéro vérifié.</p>
</div>

<!-- Erreur -->
<div class="bj-input-group bj-input-group--error">
  <label class="bj-label" for="dob">Date de naissance</label>
  <input class="bj-input" id="dob" type="text" aria-invalid="true" aria-describedby="msg-err">
  <p class="bj-message bj-message--error" id="msg-err" role="alert">Format attendu : JJ/MM/AAAA.</p>
</div>

<!-- États + taille compacte -->
<div class="bj-input-group bj-input-group--valid">
  <input class="bj-input bj-input--sm" type="text" value="OK" readonly aria-describedby="msg-ok-sm">
  <p class="bj-message bj-message--valid" id="msg-ok-sm" role="status">Validé.</p>
</div>
<div class="bj-input-group bj-input-group--error">
  <input class="bj-input bj-input--sm" type="text" aria-invalid="true" aria-describedby="msg-err-sm">
  <p class="bj-message bj-message--error" id="msg-err-sm" role="alert">Erreur.</p>
</div>

Champ avec icône

<!-- Icône à droite (md) -->
<div class="bj-input-wrap">
  <i class="ri-search-line bj-input-wrap__icon" aria-hidden="true"></i>
  <input class="bj-input" type="search" placeholder="Rechercher…">
</div>
<!-- Même disposition, champ compact -->
<div class="bj-input-wrap">
  <i class="ri-mail-line bj-input-wrap__icon" aria-hidden="true"></i>
  <input class="bj-input bj-input--sm" type="email" placeholder="Courriel">
</div>

Zone de texte

Motif de la demandeDécrivez brièvement votre situation (facultatif).

<div class="bj-input-group">
  <label class="bj-label" for="motif">Motif de la demande</label>
  <textarea class="bj-input" id="motif" rows="4" placeholder="Votre message…"></textarea>
</div>

<!-- Zone en erreur (bordure héritée du groupe) -->
<div class="bj-input-group bj-input-group--error">
  <label class="bj-label" for="just">Justification</label>
  <textarea class="bj-input" id="just" rows="3" aria-invalid="true" aria-describedby="just-msg"></textarea>
  <p id="just-msg" class="bj-message bj-message--error" role="alert">Minimum 20 caractères.</p>
</div>

Champ désactivé

Référence dossier

<input class="bj-input" type="text" disabled value="BJ-2025-00442">

Classes CSS

Classe	Description
`bj-input-group`	Conteneur vertical (label, aide, champ, message).
`bj-label`	Libellé du champ.
`bj-hint`	Texte d’aide sous le libellé.
`bj-input`	Champ input ou textarea.
`bj-input--sm`	Variante compacte du champ.
`bj-input-group--valid / bj-input-group--error`	États de validation sur le groupe.
`bj-message, bj-message--valid, bj-message--error, bj-message--info`	Messages de retour sous le champ.
`bj-input-wrap`	Conteneur pour champ avec icône.
`bj-input-wrap__icon`	À placer sur l’élément d’icône dans <code>bj-input-wrap</code> pour le positionnement à droite.
`(attribut type)`	Valeurs usuelles : <code>text</code>, <code>email</code>, <code>number</code>, <code>password</code>, <code>tel</code>, <code>url</code>, <code>search</code>, etc. Pas de classe dédiée par type.