Barre de recherche - Search

La barre de recherche est un système de navigation qui permet à l’utilisateur d’accéder rapidement à un contenu en lançant une recherche sur un mot clé ou une expression.

Barre de recherche de base

Le paramètre :url est obligatoire. Les options suivantes sont disponibles :

  • :name, appliqué au champ input. Par défaut : :search
  • :size, la taille du composant. Par défaut : :md. Valeurs possibles : :sm|:md|:lg.
  • :label_text, l’intitulé du libellé. Par défaut : Recherche.
  • :button_text, l’intitulé du bouton, également utilisé en placeholder. Par défaut : Rechercher.
  • :value, la valeur du champ de recherche. Par défaut, récupère le paramètre :name de la requête courante.
  • :params (Hash), des paramètres supplémentaires à ajouter au formulaire sous forme de champs cachés. Vide par défaut.
  • :html_attributes, des attributs supplémentaires à ajouter au formulaire.

Code

= dsfr_search(url: "/components/search/")

Résultat

<form class="fr-search-bar" action="/components/search/" accept-charset="UTF-8" data-remote="true" method="get">
  <input name="utf8" type="hidden" value="✓" autocomplete="off" />
  <label for="search_24760" class="fr-label">
    Recherche
  </label>
  <input id="search_24760" placeholder="Rechercher" class="fr-input" type="search" name="search" />
  <button type="submit" class="fr-btn">
    Rechercher
  </button>
</form>

Version large

Quand un site propose une recherche globale :

  • celle-ci doit être intégrée dans l’en-tête et accessible depuis l’ensemble des pages du site.
  • si elle constitue le point de départ de la navigation pour l’utilisateur, la barre de recherche LG doit être présentée comme l’élément le plus important sur la page d’accueil.

Note : la largeur du composant s’adapte à son contenant.

Code

= dsfr_search(url: "/components/search/", size: :lg, name: :q, button_text: "Filtrer", method: :post, params: { sort: :url })

Résultat

<form class="fr-search-bar fr-search-bar--lg" action="/components/search/" accept-charset="UTF-8" data-remote="true" method="post">
  <input name="utf8" type="hidden" value="✓" autocomplete="off" />
  <label for="q_24800" class="fr-label">
    Recherche
  </label>
  <input id="q_24800" placeholder="Filtrer" class="fr-input" type="search" name="q" />
  <button type="submit" class="fr-btn">
    Filtrer
  </button>
</form>

Plus d’informations