DSBJ - Design Système du Bénin

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.

Champ de saisie