Barre de recherche
شريط البحثSearch bar
Stable
src/dsm/components/search-bar.tsxFormulaire de recherche autonome avec bouton d'envoi, bouton d'effacement et état de chargement. Pensé pour les pages d'accueil de portails de services, où la recherche est l'action principale plutôt qu'un élément secondaire du header.
Import
import { SearchBar } from "@/dsm/components/search-bar";Exemples
Simple
Barre de recherche avec effacement une fois du texte saisi.
LTR
Tailles
Les deux tailles disponibles : md et lg.
LTR
Chargement
État de chargement pendant l'exécution de la recherche.
LTR
Usage
Quand l'utiliser
- Utilisez `SearchBar` en page d'accueil ou en tête d'une liste de résultats, comme point d'entrée principal vers les démarches ou les contenus.
- Utilisez `size="lg"` en position centrale d'une page d'accueil pour lui donner du poids visuel.
- Passez `loading` pendant l'appel réseau qui suit la soumission, pour indiquer que la recherche est en cours.
Quand ne pas l'utiliser
- N'utilisez pas `SearchBar` pour une recherche instantanée filtrant une liste déjà affichée : un simple `Input` avec `iconStart` suffit.
- N'utilisez pas ce composant dans l'en-tête du site si `Header` propose déjà son propre champ de recherche intégré.
Accessibilité & langues
Accessibilité
- Le champ possède un libellé visible uniquement des lecteurs d'écran (`sr-only`) : le rôle `search` et le bouton suffisent à l'identifier visuellement.
- Le bouton d'effacement n'apparaît qu'une fois du texte saisi et redonne le focus au champ après un clic.
- Les boutons d'action (rechercher, effacer) portent tous un `aria-label` explicite, car ils n'affichent qu'une icône.
RTL & multilingue
- Le bouton d'envoi reste au bord de fin de ligne grâce à l'ordre naturel du DOM, sans classe directionnelle.
Propriétés
SearchBar
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| size | "md" | "lg" | md | Hauteur de la barre. |
| placeholder | string | t.searchPlaceholder | Texte d'invite du champ. |
| defaultValue | string | — | Valeur initiale du champ. |
| onSearch | (query: string) => void | — | Appelé à la soumission du formulaire, avec le texte saisi. |
| action | string | — | URL de destination pour une soumission classique (sans JavaScript). |
| loading | boolean | — | Désactive le bouton d'envoi et affiche un indicateur de chargement. |