Formulaires

Groupes de champs

.input-group colle un champ à du texte, un bouton ou une liste déroulante pour former un seul contrôle. Il sert à afficher une unité comme FCFA, un indicatif ou un bouton d’action à côté de la saisie.

Préfixes et suffixes#

Placez des .input-group-text avant ou après le champ. Le symbole @, l’unité ou l’indicatif apparaissent dans le même cadre que la saisie. Si le préfixe est décoratif, masquez-le au lecteur d’écran avec aria-hidden, sinon reliez-le au champ.

Montant du virement

FCFA

Téléphone mobile

+225

Identifiant de banque en ligne

@bdu.ci

<div class="mb-3">
  <label for="groupe-montant" class="form-label">Montant du virement</label>
  <div class="input-group">
    <input type="text" class="form-control" id="groupe-montant" inputmode="numeric" placeholder="150 000" aria-describedby="groupe-montant-devise">
    <span class="input-group-text" id="groupe-montant-devise">FCFA</span>
  </div>
</div>
<div class="mb-3">
  <label for="groupe-tel" class="form-label">Téléphone mobile</label>
  <div class="input-group">
    <span class="input-group-text" id="groupe-tel-indicatif">+225</span>
    <input type="tel" class="form-control" id="groupe-tel" autocomplete="tel-national" placeholder="07 08 09 10 11" aria-describedby="groupe-tel-indicatif">
  </div>
</div>
<div>
  <label for="groupe-email" class="form-label">Identifiant de banque en ligne</label>
  <div class="input-group">
    <input type="text" class="form-control" id="groupe-email" autocomplete="username" aria-describedby="groupe-email-suffixe">
    <span class="input-group-text" id="groupe-email-suffixe">@bdu.ci</span>
  </div>
</div>

Plusieurs textes et plusieurs champs#

Combinez autant de .input-group-text et de champs que nécessaire. Chaque champ garde son propre libellé, éventuellement masqué visuellement.

Montant et reste à payer

FCFA ,00

Nom et prénom du bénéficiaire

<div class="mb-3">
  <label for="groupe-montant-ht" class="form-label">Montant et reste à payer</label>
  <div class="input-group">
    <span class="input-group-text">FCFA</span>
    <input type="text" class="form-control" id="groupe-montant-ht" value="1 250 000" aria-describedby="groupe-montant-ht-dec">
    <span class="input-group-text" id="groupe-montant-ht-dec">,00</span>
  </div>
</div>
<fieldset>
  <legend class="form-label fs-6">Nom et prénom du bénéficiaire</legend>
  <div class="input-group">
    <label class="visually-hidden" for="groupe-prenom">Prénom</label>
    <input type="text" class="form-control" id="groupe-prenom" placeholder="Prénom" autocomplete="given-name">
    <label class="visually-hidden" for="groupe-nom">Nom</label>
    <input type="text" class="form-control" id="groupe-nom" placeholder="Nom" autocomplete="family-name">
  </div>
</fieldset>

Boutons#

Un .btn placé dans le groupe devient un bouton d’action collé au champ : recherche, copie, application d’un code promotionnel.

Rechercher un bénéficiaire

Votre IBAN

<div class="mb-3">
  <label for="groupe-recherche" class="form-label">Rechercher un bénéficiaire</label>
  <div class="input-group">
    <input type="search" class="form-control" id="groupe-recherche" placeholder="Nom ou numéro de compte">
    <button class="btn btn-primary" type="button" id="groupe-recherche-bouton">Rechercher</button>
  </div>
</div>
<div>
  <label for="groupe-iban" class="form-label">Votre IBAN</label>
  <div class="input-group">
    <button class="btn btn-outline-secondary" type="button" id="groupe-iban-copie">Copier</button>
    <input type="text" class="form-control" id="groupe-iban" value="CI93 CI008 01111 101111111111 36" readonly aria-describedby="groupe-iban-copie">
  </div>
</div>

Listes déroulantes#

Un bouton avec .dropdown-toggle et un .dropdown-menu donnent un choix d’unité ou de type à côté de la saisie. Ce composant demande le JavaScript de Cauri.

Recherche par référence

<label for="groupe-ref" class="form-label">Recherche par référence</label>
<div class="input-group">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Type</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Numéro de compte</a></li>
    <li><a class="dropdown-item" href="#">Référence de virement</a></li>
    <li><a class="dropdown-item" href="#">Numéro de carte</a></li>
  </ul>
  <input type="text" class="form-control" id="groupe-ref">
</div>

Tailles#

.input-group-lg et .input-group-sm se placent sur le conteneur : champs, textes, boutons et sélecteurs du groupe changent de taille ensemble. N’ajoutez pas de taille sur chaque enfant.

FCFA

<div class="input-group input-group-lg mb-3">
  <span class="input-group-text" id="groupe-lg-devise">FCFA</span>
  <input type="text" class="form-control" aria-label="Montant en FCFA (grand)" aria-describedby="groupe-lg-devise" value="500 000">
</div>
<div class="input-group mb-3">
  <span class="input-group-text" id="groupe-md-devise">FCFA</span>
  <input type="text" class="form-control" aria-label="Montant en FCFA" aria-describedby="groupe-md-devise" value="500 000">
</div>
<div class="input-group input-group-sm">
  <span class="input-group-text" id="groupe-sm-devise">FCFA</span>
  <input type="text" class="form-control" aria-label="Montant en FCFA (petit)" aria-describedby="groupe-sm-devise" value="500 000">
</div>

Cases et radios dans un groupe#

Une case ou un radio peut précéder un champ pour l’activer ou le désactiver. Donnez-lui un aria-label qui nomme précisément l’action.

<div class="input-group mb-3">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="checkbox" value="" id="groupe-case-plafond" aria-label="Définir un plafond de virement">
  </div>
  <input type="text" class="form-control" aria-label="Plafond de virement en FCFA" placeholder="Plafond de virement journalier" inputmode="numeric">
</div>
<div class="input-group">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="radio" name="groupe-radio" value="" id="groupe-radio-autre" aria-label="Choisir un autre montant">
  </div>
  <input type="text" class="form-control" aria-label="Autre montant en FCFA" placeholder="Autre montant" inputmode="numeric">
</div>

Sélecteurs et fichiers#

Les .form-select et les input type="file" rejoignent aussi le groupe, avec un bouton ou un texte avant ou après.

Compte à débiter

Justificatif

<div class="input-group mb-3">
  <label class="input-group-text" for="groupe-select-compte">Compte à débiter</label>
  <select class="form-select" id="groupe-select-compte">
    <option selected>Compte courant …1136</option>
    <option>Compte d'épargne …2204</option>
  </select>
</div>
<div class="input-group">
  <input type="file" class="form-control" id="groupe-fichier" aria-label="Envoyer un justificatif de domicile">
  <label class="input-group-text" for="groupe-fichier">Justificatif</label>
</div>

Classes de groupe de champs

Classes de groupe de champs
Classe	Effet
`.input-group`	Conteneur flex : aligne les éléments et fusionne leurs bordures.
`.input-group-text`	Bloc de texte (unité, préfixe, case) intégré au groupe.
`.input-group-sm`, `.input-group-lg`	Réduit ou agrandit tous les éléments du groupe.
`.has-validation`	Garde les angles arrondis corrects quand le groupe affiche un message de validation (voir Validation).
`.btn`	Bouton collé au champ ; toutes les variantes de couleur fonctionnent.
`.dropdown-toggle` + `.dropdown-menu`	Menu déroulant intégré au groupe.

Bonnes pratiques

À faire

Affichez les unités (FCFA, mois, %) dans un .input-group-text plutôt que dans le libellé.
Gardez un libellé visible au-dessus du groupe et utilisez aria-label seulement pour les éléments secondaires.
Préférez un seul bouton d’action par groupe, aligné à droite du champ.
Reliez un texte indispensable (indicatif, unité) au champ par aria-describedby.

À éviter

N’employez pas un .input-group-text comme seul libellé du champ si le libellé est essentiel : placez un <label> au-dessus ou utilisez <label class="input-group-text">.
N’imbriquez pas plusieurs .input-group les uns dans les autres.
Ne mettez pas d’éléments différents des champs, textes et boutons dans un groupe : la mise en page se casse.

Accessibilité

Tout champ du groupe doit avoir un nom accessible : <label> visible, <label class="visually-hidden"> ou aria-label.
Les cases et radios dans .input-group-text exigent un aria-label précis (« Définir un plafond de virement »).
Les boutons-icônes du groupe ont un aria-label ; un bouton « Copier » confirme l’action dans un message annoncé (role="status").
Le menu déroulant d’un groupe garde aria-expanded sur son bouton, mis à jour par le JavaScript de Cauri.