Combobox

Champ de saisie avec autocomplétion : l’utilisateur tape pour filtrer une liste déroulante d’options.

Exemple

Commune de résidence
  • Porto-Novo
  • Porto (autre)
<div class="bj-combobox">
  <label class="bj-label" for="cb1">Ville</label>
  <div class="bj-combobox__input-wrap">
    <input id="cb1" class="bj-combobox__input" type="text"
      role="combobox" aria-autocomplete="list"
      aria-expanded="true" placeholder="Rechercher une ville…" />
    <i class="ri-arrow-down-s-line bj-combobox__icon"></i>
  </div>
  <ul class="bj-combobox__listbox" role="listbox">
    <li class="bj-combobox__option" role="option">Cotonou</li>
    <li class="bj-combobox__option bj-combobox__option--active"
        role="option">Porto-Novo</li>
  </ul>
</div>

Aucun résultat

Liste ouverte mais filtre vide : bloc bj-combobox__listbox avec bj-combobox__no-results (texte configurable côté Vue via noResults).

Aucun résultat

<div class="bj-combobox bj-combobox--open">
  <div class="bj-combobox__input-wrap">
    <input class="bj-combobox__input" type="text" role="combobox" aria-expanded="true" value="zzz" />
    <i class="ri-arrow-down-s-line bj-combobox__icon" aria-hidden="true"></i>
  </div>
  <div class="bj-combobox__listbox">
    <p class="bj-combobox__no-results">Aucun résultat</p>
  </div>
</div>

Message informatif

Hors erreur, un message d’aide utilise bj-message bj-message--info.

Choisissez un service dans la liste. 

<div class="bj-combobox">
  <label class="bj-label" for="cbi">Service</label>
  <div class="bj-combobox__input-wrap">
    <input id="cbi" class="bj-combobox__input" type="text" role="combobox" placeholder="Rechercher…" />
    <i class="ri-arrow-down-s-line bj-combobox__icon" aria-hidden="true"></i>
  </div>
  <p class="bj-message bj-message--info" role="status">Choisissez un service dans la liste.</p>
</div>

Variantes

Le combobox supporte les états d’erreur et de désactivation, ainsi qu’un message « aucun résultat » configurable.

Classes CSS

ClasseDescription
bj-labelLibellé et aide sous le champ.
bj-hintLibellé et aide sous le champ.
bj-comboboxConteneur principal.
bj-combobox__input-wrapEnveloppe de l’input et de l’icône.
bj-combobox__inputChamp texte avec role="combobox".
bj-combobox__iconFlèche d’indication d’ouverture.
bj-combobox__listboxListe déroulante des options.
bj-combobox__optionÉlément de la liste.
bj-combobox__option--activeOption survolée / navigée au clavier.
bj-combobox__no-resultsMessage quand aucune option ne correspond.
bj-combobox--errorÉtat d’erreur.
bj-combobox--openÉtat ouvert (rotation de l’icône).
bj-message--info / bj-message--errorMessage : <code>bj-message--info</code> ou <code>bj-message--error</code>.

Accessibilité

L’input porte role="combobox", aria-autocomplete="list", aria-expanded et aria-activedescendant. La liste utilise role="listbox" avec des role="option". Navigation clavier : flèches, Entrée pour sélectionner, Échap pour fermer.