--- boost: 0 sitemap: noindex: true title: Code de la Barre de recherche shortTitle: Code de la Barre de recherche description: Mise à disposition des extraits de code, de l’API et de la documentation technique du composant Barre de recherche. shortDescription: Accès rapide à un contenu par mot clé keywords: recherche, search, barre de recherche, navigation, formulaire, interface, DSFR, accessibilité, moteur de recherche cover: ../_asset/cover/cover.png excerpt: La barre de recherche permet à l’usager d’accéder à un contenu ciblé en saisissant un mot clé ou une phrase. Elle peut être globale ou contextuelle selon l’usage. summary: Ce composant propose un champ de saisie avec bouton pour rechercher un contenu spécifique au sein d’un site ou d’un bloc fonctionnel. Elle s’intègre idéalement à l’en-tête pour un usage global ou dans une section précise pour des recherches contextuelles. Le composant suit des recommandations strictes en matière d’accessibilité, de largeur minimale, de rédaction des libellés et ne permet pas de personnalisation graphique. mesh: - component/header --- ## Barre de recherche La barre de recherche est un système de navigation permettant à l'usager d’accéder rapidement à un contenu en lançant une recherche sur un mot clé ou une phrase. :::dsfr-doc-tab-navigation - [Présentation](../index.md) - [Démo](../demo/index.md) - [Design](../design/index.md) - Code - [Accessibilité](../accessibility/index.md) ::: ### HTML #### Structure du composant Le composant **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. Le composant doit être utilisé dans un formulaire `

`, pour permettre un fonctionnement sans JS. Sa structure est la suivante : - Le conteneur de la barre de recherche doit être un élément HTML `

` avec le rôle `search` défini par la classe `fr-search-bar`. - Le champ de recherche est un élément HTML `` de type `search` défini par la classe `fr-input`. - Le champ de recherche doit être associée à un libellé `` avec la classe `fr-label`. - Le bouton de recherche est un élément HTML `

``` --- ### CSS #### Installation du CSS Pour fonctionner correctement le style CSS du composant et de ses dépendances doivent être importés. L'import doit se faire avant le contenu de la page dans la partie ``, et de préférence avec les fichiers minifiés, car plus légers. Il est possible d'importer les fichiers CSS avec un niveau de granularité adapté à vos besoins. Voir le découpage des fichiers CSS du DSFR dans la [documentation dédiée](path:/getting-started/developer/get-started#les-css). :::fr-table[Dépendances CSS]{valign=top scroll=false} | Dépendance | Obligatoire | |------------|-------------| | Core | Oui | | Input | Oui | | Button | Oui | | Search | Oui | ::: **Exemple d'imports CSS** ```HTML ``` #### Variante de taille La barre de recherche est disponible en deux variantes de tailles pour s'adapter à différents contextes d'utilisation. Pour appliquer une variante de taille, ajoutez une des classes suivantes à l'élément `

` : - En taille MD : par défaut. - En taille LG : définie par la classe `fr-search-bar--lg`. **Exemple de variante de taille** ```HTML ``` --- ### JavaScript Le composant Barre de recherche **ne nécessite pas l'utilisation de JavaScript** pour son fonctionnement de base. --- ### Note de version [Voir les évolutions sur github](https://github.com/GouvernementFR/dsfr/pulls?q=is%3Apr+is%3Aclosed+is%3Amerged+search+)