Recherche

Champ de recherche jumelé à un bouton d’action pour les moteurs internes.

Exemple

<form class="bj-search" role="search" action="/recherche" method="get">
  <input class="bj-search__input" type="search" name="q" placeholder="Rechercher…" />
  <button type="submit" class="bj-search__btn">
    <span class="bj-sr-only">Lancer la recherche</span>
    <i class="ri-search-line" aria-hidden="true"></i>
  </button>
</form>

<form class="bj-search bj-search--lg" role="search">
  <input class="bj-search__input" type="search" placeholder="Recherche large" />
  <button type="submit" class="bj-search__btn">Rechercher</button>
</form>

section-button-label

section-button-label-body

Variantes

bj-search--lg pour un gabarit plus haut.

Classes CSS

ClasseDescription
bj-searchConteneur <code>form</code> avec <code>role="search"</code> ; taille médiane par défaut (aucun modificateur de taille).
bj-search__inputChamp.
bj-search__btnBouton.
bj-search--lgGrande taille.

Accessibilité

role="search" sur le form. Libellé accessible au champ ; bj-sr-only pour le texte du bouton icône.