Liste déroulante

Choix d’une option dans une liste fermée, avec styles homogènes aux autres champs.

Exemple

Le premier bloc combine bj-label, bj-hint, une option vide désactivée comme placeholder, et un message bj-message--info.

Choisissez la commune de résidence.

Modifiable jusqu’à validation. 

<div class="bj-select-group">
  <label class="bj-label" for="s1">Commune</label>
  <span class="bj-hint">Choisissez la commune de résidence.</span>
  <select class="bj-select" id="s1">
    <option value="" disabled selected hidden>Sélectionner…</option>
    <option value="cotonou">Cotonou</option>
  </select>
  <p class="bj-message bj-message--info" role="status">Modifiable jusqu’à validation.</p>
</div>

Variantes

bj-select--error pour l’état d’erreur. Désactivation native disabled.

<select class="bj-select bj-select--error" aria-invalid="true" aria-describedby="s-err">
  <option value="">Choisir…</option>
</select>
<p id="s-err" class="bj-message bj-message--error" role="alert">Champ obligatoire.</p>

Variante avec recherche

Les classes bj-select-custom* remplacent le select natif par un panneau déroulant avec champ de recherche intégré.

Recherche : fermé et libellé du placeholder

Sans valeur sélectionnée, le déclencheur utilise bj-select-custom__trigger--placeholder. Ouvrir le panneau en ajoutant bj-select-custom--open sur le conteneur.

<div class="bj-select-group">
  <label class="bj-label" for="sc-closed">Commune</label>
  <div class="bj-select-custom">
    <button id="sc-closed" type="button" class="bj-select-custom__trigger bj-select-custom__trigger--placeholder"
      role="combobox" aria-expanded="false" aria-haspopup="listbox">
      <span>Sélectionner une commune…</span>
      <i class="ri-arrow-down-s-line" aria-hidden="true"></i>
    </button>
  </div>
</div>

Recherche : désactivé

Comme pour le select natif, utilisez l’attribut disabled sur le déclencheur.

Recherche : panneau ouvert

Option active : bj-select-custom__option--active. Option grisée : aria-disabled="true" sur le li.

  • Cotonou
  • Porto-Novo
  • Indisponible 
<div class="bj-select-custom bj-select-custom--open">
  <button type="button" class="bj-select-custom__trigger" role="combobox" aria-expanded="true" aria-haspopup="listbox">
    <span>Cotonou</span>
    <i class="ri-arrow-down-s-line" aria-hidden="true"></i>
  </button>
  <div class="bj-select-custom__panel">
    <input class="bj-select-custom__search" type="text" placeholder="Filtrer…" />
    <ul class="bj-select-custom__listbox" role="listbox">
      <li class="bj-select-custom__option" role="option" aria-selected="true">Cotonou</li>
      <li class="bj-select-custom__option bj-select-custom__option--active" role="option">Porto-Novo</li>
      <li class="bj-select-custom__option" role="option" aria-disabled="true">Indisponible</li>
    </ul>
  </div>
</div>

Recherche : aucun résultat

Afficher bj-select-custom__no-results lorsque le filtre ne renvoie aucune option.

Aucun résultat

<div class="bj-select-custom bj-select-custom--open">
  <button type="button" class="bj-select-custom__trigger" role="combobox" aria-expanded="true" aria-haspopup="listbox">
    <span>Commune</span>
    <i class="ri-arrow-down-s-line" aria-hidden="true"></i>
  </button>
  <div class="bj-select-custom__panel">
    <input class="bj-select-custom__search" type="text" placeholder="Rechercher…" value="zzz" />
    <p class="bj-select-custom__no-results">Aucun résultat</p>
  </div>
</div>

Recherche : erreur

Avec la recherche, bj-select--error se place sur bj-select-group pour la bordure du déclencheur.

<div class="bj-select-group bj-select--error">
  <label class="bj-label" for="sc-err">Statut</label>
  <div class="bj-select-custom">
    <button id="sc-err" type="button" class="bj-select-custom__trigger bj-select-custom__trigger--placeholder"
      role="combobox" aria-invalid="true" aria-expanded="false" aria-haspopup="listbox" aria-describedby="sc-err-msg">
      <span>Choisir…</span>
      <i class="ri-arrow-down-s-line" aria-hidden="true"></i>
    </button>
  </div>
  <p id="sc-err-msg" class="bj-message bj-message--error" role="alert">Sélection requise.</p>
</div>

Placeholder du champ de recherche

Personnalisez le filtre via placeholder sur bj-select-custom__search (ex. « Filtrer les communes… »).

  • Parakou

Marquage complet (recherche)

<div class="bj-select-group">
  <label class="bj-label" for="sc1">Commune</label>
  <div class="bj-select-custom">
    <button id="sc1" type="button" class="bj-select-custom__trigger"
      role="combobox" aria-expanded="true" aria-haspopup="listbox">
      <span>Cotonou</span>
      <i class="ri-arrow-down-s-line" aria-hidden="true"></i>
    </button>
    <div class="bj-select-custom__panel">
      <input class="bj-select-custom__search"
        type="text" placeholder="Rechercher…" />
      <ul class="bj-select-custom__listbox" role="listbox">
        <li class="bj-select-custom__option"
          role="option" aria-selected="true">Cotonou</li>
        <li class="bj-select-custom__option"
          role="option">Porto-Novo</li>
      </ul>
    </div>
  </div>
</div>

Classes CSS

ClasseDescription
bj-labelLibellé du champ.
bj-hintTexte d’aide sous le libellé.
bj-select-groupGroupe label + select.
bj-select-group.bj-select--errorVariante recherche : <code>bj-select--error</code> sur le groupe pour l’état d’erreur du déclencheur.
bj-selectListe déroulante.
bj-select--errorBordure d’erreur.
bj-message--info / bj-message--errorSous le champ : <code>bj-message--info</code> ou <code>bj-message--error</code>.
bj-select-customConteneur du select custom.
bj-select-custom--openÉtat ouvert (chevron, panneau affiché).
bj-select-custom__triggerBouton déclencheur.
bj-select-custom__trigger--placeholderStyle du texte du déclencheur sans valeur sélectionnée.
bj-select-custom__panelPanneau déroulant.
bj-select-custom__searchChamp de recherche dans le panneau.
bj-select-custom__listboxListe des options.
bj-select-custom__optionÉlément d’option.
bj-select-custom__option--activeSurbrillance d’option (clavier ou survol).
bj-select-custom__no-resultsTexte lorsque la recherche est vide.

Accessibilité

Liez le label au select. En erreur : aria-invalid et message relié par aria-describedby. En mode recherche, le trigger porte role="combobox" et la liste role="listbox".