Search field

Champ de recherche

Un champ de texte dans un formulaire de recherche nommé qui envoie une requête pour trouver du contenu correspondant.

Avec vos mots

Ce que les gens décrivent

Alias documentés : boîte de recherche, champ de requête, recherche du site

une boîte pour rechercher dans le catalogue
saisir des mots et appuyer sur Entrée
une recherche de site avec un bouton effacer
saisir une requête dans l'en-tête
trouver des articles avec ce champ
un champ de recherche sans options suggérées

Essayer

Saisir du texte

Comparer les trois comportements

Scénario comparatif partagé : Un formulaire recueille du texte, la longueur du contenu et l'intention d'envoi déterminant le contrôle de saisie approprié.

Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.

Champ de recherche

Search field envoie une requête ; Text field modifie une valeur générale, tandis que Textarea accepte un contenu multiligne.

Votre mission

Rechercher dialog, envoyer la requête, puis ouvrir l’un des résultats de concept affichés.

Cas limite à vérifier

Une requête sans correspondance affiche un résultat vide explicite, tandis que l’échec simulé conserve la saisie et propose Réessayer.

Mission

Champ de recherche - Search field

Rechercher dialog, envoyer la requête, puis ouvrir l’un des résultats de concept affichés.

État principal : La région de recherche nommée contient le champ, l'action visible et le contrôle effacer lorsqu'il est rempli.

Parties du spécimen

Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.

Libellé

Le texte persistant qui nomme un contrôle ou un champ.

À utiliser quand

Rechercher dans un site, catalogue ou ensemble de résultats
Fournir un envoi de requête clair et répétable

À éviter quand

Le texte est une propriété générale du formulaire
Des suggestions sélectionnables sont nécessaires sans comportement Combobox

Comparer les concepts proches

Text field accepte une ligne ; Textarea accepte plusieurs lignes, tandis que Search field envoie une requête dans un contexte de recherche.

Champ de texte

Textarea accepte les retours à la ligne et un contenu libre long ; Text field tient sur une ligne, tandis que Search field envoie une requête.

Zone de texte multiligne

Build pack

Transformer ce concept en prompt utile

Choisissez la tâche et la destination. Les noms techniques restent en anglais.

Que voulez-vous faire ?

CréerModifierRéparer

Où utiliserez-vous le prompt ?Langue du promptLangue de l’interface à construire

Votre objectif

Détails techniques

Comportements

Lancer une recherche
Entrée envoie la requête actuelle via un formulaire de recherche nommé sans changer le pattern du champ.
Effacer la recherche
Le contrôle d'effacement vide la requête, garde le focus dans le champ et met les résultats à jour de façon prévisible.
Expliquer la validation
Un message précis dans le contexte identifie le champ invalide et explique comment le corriger.

États

Recherche au repos avec une requête vide
Recherche au repos avec une requête vide
Requête prête à être envoyée
Requête prête à être envoyée
Recherche en cours
Recherche en cours
Résultats visibles
Résultats visibles
Aucun résultat de recherche
Aucun résultat de recherche
Erreur de recherche
Erreur de recherche
Résultat de recherche ouvert
Résultat de recherche ouvert

Transitions d’état

Recherche au repos avec une requête vide → Requête prête à être envoyée
La saisie de termes significatifs révèle le contrôle effacer et prépare l’envoi explicite.
Requête prête à être envoyée → Recherche en cours
Entrée ou l’action visible Rechercher lance une requête et bloque un envoi en double.
Recherche en cours → Résultats visibles
La requête se termine avec des concepts correspondants et affiche leurs boutons de résultat.
Recherche en cours → Aucun résultat de recherche
La requête se termine sans correspondance et affiche l’état explicite Aucun concept trouvé.
Recherche en cours → Erreur de recherche
La requête d’erreur simulée échoue en conservant la saisie et en affichant Réessayer avec un exemple.
Erreur de recherche → Recherche en cours
Réessayer avec un exemple remplace la requête par raccourcis clavier et lance une nouvelle requête.
Résultats visibles → Résultat de recherche ouvert
L’activation d’un résultat marque ce concept comme ouvert dans la démonstration.
Résultats visibles → Requête prête à être envoyée
La modification de la requête envoyée la prépare pour une nouvelle recherche explicite.
Requête prête à être envoyée → Recherche au repos avec une requête vide
Le contrôle effacer retire la requête tout en conservant le focus dans le champ.
Résultats visibles → Recherche au repos avec une requête vide
Le contrôle effacer retire la requête envoyée et ses résultats tout en conservant le focus.
Aucun résultat de recherche → Recherche au repos avec une requête vide
Le contrôle effacer retire la requête sans correspondance et conserve le focus dans le champ.
Résultat de recherche ouvert → Recherche en cours
Envoyer après l’ouverture d’un résultat efface cet état et lance la requête actuelle.
Aucun résultat de recherche → Requête prête à être envoyée
Modifier une requête envoyée sans correspondance retire le résultat vide et prépare une nouvelle recherche.
Erreur de recherche → Requête prête à être envoyée
Modifier la requête en échec retire l’erreur et prépare un nouvel envoi explicite.
Recherche en cours → Requête prête à être envoyée
Modifier pendant le chargement annule la mise à jour en attente et prépare la requête modifiée.
Recherche en cours → Recherche au repos avec une requête vide
Effacer pendant le chargement annule la mise à jour en attente, vide la requête et conserve le focus.
Erreur de recherche → Recherche au repos avec une requête vide
Effacer retire la requête en échec et l’erreur tout en conservant le focus dans le champ.
Résultat de recherche ouvert → Recherche au repos avec une requête vide
Effacer retire la requête, les résultats et l’état de résultat ouvert tout en conservant le focus dans le champ.

Scénarios de test

Contexte: Un répertoire de concepts recherche des noms de concepts UI connus après un envoi explicite.
Mission: Rechercher dialog, envoyer la requête, puis ouvrir l’un des résultats de concept affichés.
État principal: La région de recherche nommée contient le champ, l'action visible et le contrôle effacer lorsqu'il est rempli.
Cas limite: Une requête sans correspondance affiche un résultat vide explicite, tandis que l’échec simulé conserve la saisie et propose Réessayer.

Accessibilité

Role: search landmark containing native search input
Nom accessible: Le contrôle principal ou la région nommée possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
Focus: L’envoi laisse le focus dans le formulaire de recherche pendant la mise à jour des résultats ; effacer le rend au champ.
Fermeture: Sans objet : les résultats se mettent à jour en ligne ; Effacer retire la requête, les résultats envoyés, l’état ouvert et les erreurs.
Scroll: Le champ actif, le texte d'aide et le message de validation restent visibles lorsque la page ou un clavier virtuel modifie la zone d'affichage.
Annonce: Le nom de la région, le libellé, la requête, le nombre de résultats, le chargement, aucun résultat et l'erreur sont exposés.
Clavier: Tab focalise le champ
Entrée envoie la recherche
Tab atteint les contrôles effacer et rechercher

Bindings

form[role=search] with input[type=search]
implementationKind
native
nativeElement
form[role=search] with input[type=search]
ariaPattern
search landmark and searchbox
radixPrimitive
Non applicable
shadcnRecipe
Non applicable
runtimeDependency
Non applicable
packageName
Non applicable
exportName
Non applicable
exactVersion
Non applicable
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Non applicable
validFrom
Non applicable
validUntil
Non applicable
Limite d’équivalence : A plain search field submits a query. Once it presents selectable filtered suggestions, the interaction becomes a Combobox.
Vérifier la source du binding

Sources

WHATWG HTML: The input element
WHATWG · standard · 2026-07-16
Affirmation couverte : Search field: native input types, labeling, state, validation, and form participation.
WHATWG HTML: Forms
WHATWG · standard · 2026-07-16
Affirmation couverte : Search field: native form controls, labels, submission, validation, and disabled-state behavior.

Vérifié le 2026-07-16 · rev. 1

Responsable: SkillCodex Editorial
Statut: review
Relecture: Independent editorial review pending
Prochaine revue: 2026-10-16
Publication: Non publiée
Historique: Brouillon initial sourcé du MVP, en attente de relecture indépendante.

Search field

Champ de recherche

Un champ de texte dans un formulaire de recherche nommé qui envoie une requête pour trouver du contenu correspondant.

Avec vos mots

Ce que les gens décrivent

Alias documentés : boîte de recherche, champ de requête, recherche du site

une boîte pour rechercher dans le catalogue
saisir des mots et appuyer sur Entrée
une recherche de site avec un bouton effacer
saisir une requête dans l'en-tête
trouver des articles avec ce champ
un champ de recherche sans options suggérées

Essayer

Saisir du texte

Comparer les trois comportements

Scénario comparatif partagé : Un formulaire recueille du texte, la longueur du contenu et l'intention d'envoi déterminant le contrôle de saisie approprié.

Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.

Champ de recherche

Search field envoie une requête ; Text field modifie une valeur générale, tandis que Textarea accepte un contenu multiligne.

Votre mission

Rechercher dialog, envoyer la requête, puis ouvrir l’un des résultats de concept affichés.

Cas limite à vérifier

Une requête sans correspondance affiche un résultat vide explicite, tandis que l’échec simulé conserve la saisie et propose Réessayer.

Mission

Champ de recherche - Search field

Rechercher dialog, envoyer la requête, puis ouvrir l’un des résultats de concept affichés.

État principal : La région de recherche nommée contient le champ, l'action visible et le contrôle effacer lorsqu'il est rempli.

Parties du spécimen

Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.

Libellé

Le texte persistant qui nomme un contrôle ou un champ.

À utiliser quand

Rechercher dans un site, catalogue ou ensemble de résultats
Fournir un envoi de requête clair et répétable

À éviter quand

Le texte est une propriété générale du formulaire
Des suggestions sélectionnables sont nécessaires sans comportement Combobox

Comparer les concepts proches

Text field accepte une ligne ; Textarea accepte plusieurs lignes, tandis que Search field envoie une requête dans un contexte de recherche.

Champ de texte

Textarea accepte les retours à la ligne et un contenu libre long ; Text field tient sur une ligne, tandis que Search field envoie une requête.

Zone de texte multiligne

Build pack

Transformer ce concept en prompt utile

Choisissez la tâche et la destination. Les noms techniques restent en anglais.

Que voulez-vous faire ?

CréerModifierRéparer

Où utiliserez-vous le prompt ?Langue du promptLangue de l’interface à construire

Votre objectif

Détails techniques

Comportements

Lancer une recherche
Entrée envoie la requête actuelle via un formulaire de recherche nommé sans changer le pattern du champ.
Effacer la recherche
Le contrôle d'effacement vide la requête, garde le focus dans le champ et met les résultats à jour de façon prévisible.
Expliquer la validation
Un message précis dans le contexte identifie le champ invalide et explique comment le corriger.

États

Recherche au repos avec une requête vide
Recherche au repos avec une requête vide
Requête prête à être envoyée
Requête prête à être envoyée
Recherche en cours
Recherche en cours
Résultats visibles
Résultats visibles
Aucun résultat de recherche
Aucun résultat de recherche
Erreur de recherche
Erreur de recherche
Résultat de recherche ouvert
Résultat de recherche ouvert

Transitions d’état

Recherche au repos avec une requête vide → Requête prête à être envoyée
La saisie de termes significatifs révèle le contrôle effacer et prépare l’envoi explicite.
Requête prête à être envoyée → Recherche en cours
Entrée ou l’action visible Rechercher lance une requête et bloque un envoi en double.
Recherche en cours → Résultats visibles
La requête se termine avec des concepts correspondants et affiche leurs boutons de résultat.
Recherche en cours → Aucun résultat de recherche
La requête se termine sans correspondance et affiche l’état explicite Aucun concept trouvé.
Recherche en cours → Erreur de recherche
La requête d’erreur simulée échoue en conservant la saisie et en affichant Réessayer avec un exemple.
Erreur de recherche → Recherche en cours
Réessayer avec un exemple remplace la requête par raccourcis clavier et lance une nouvelle requête.
Résultats visibles → Résultat de recherche ouvert
L’activation d’un résultat marque ce concept comme ouvert dans la démonstration.
Résultats visibles → Requête prête à être envoyée
La modification de la requête envoyée la prépare pour une nouvelle recherche explicite.
Requête prête à être envoyée → Recherche au repos avec une requête vide
Le contrôle effacer retire la requête tout en conservant le focus dans le champ.
Résultats visibles → Recherche au repos avec une requête vide
Le contrôle effacer retire la requête envoyée et ses résultats tout en conservant le focus.
Aucun résultat de recherche → Recherche au repos avec une requête vide
Le contrôle effacer retire la requête sans correspondance et conserve le focus dans le champ.
Résultat de recherche ouvert → Recherche en cours
Envoyer après l’ouverture d’un résultat efface cet état et lance la requête actuelle.
Aucun résultat de recherche → Requête prête à être envoyée
Modifier une requête envoyée sans correspondance retire le résultat vide et prépare une nouvelle recherche.
Erreur de recherche → Requête prête à être envoyée
Modifier la requête en échec retire l’erreur et prépare un nouvel envoi explicite.
Recherche en cours → Requête prête à être envoyée
Modifier pendant le chargement annule la mise à jour en attente et prépare la requête modifiée.
Recherche en cours → Recherche au repos avec une requête vide
Effacer pendant le chargement annule la mise à jour en attente, vide la requête et conserve le focus.
Erreur de recherche → Recherche au repos avec une requête vide
Effacer retire la requête en échec et l’erreur tout en conservant le focus dans le champ.
Résultat de recherche ouvert → Recherche au repos avec une requête vide
Effacer retire la requête, les résultats et l’état de résultat ouvert tout en conservant le focus dans le champ.

Scénarios de test

Contexte: Un répertoire de concepts recherche des noms de concepts UI connus après un envoi explicite.
Mission: Rechercher dialog, envoyer la requête, puis ouvrir l’un des résultats de concept affichés.
État principal: La région de recherche nommée contient le champ, l'action visible et le contrôle effacer lorsqu'il est rempli.
Cas limite: Une requête sans correspondance affiche un résultat vide explicite, tandis que l’échec simulé conserve la saisie et propose Réessayer.

Accessibilité

Role: search landmark containing native search input
Nom accessible: Le contrôle principal ou la région nommée possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
Focus: L’envoi laisse le focus dans le formulaire de recherche pendant la mise à jour des résultats ; effacer le rend au champ.
Fermeture: Sans objet : les résultats se mettent à jour en ligne ; Effacer retire la requête, les résultats envoyés, l’état ouvert et les erreurs.
Scroll: Le champ actif, le texte d'aide et le message de validation restent visibles lorsque la page ou un clavier virtuel modifie la zone d'affichage.
Annonce: Le nom de la région, le libellé, la requête, le nombre de résultats, le chargement, aucun résultat et l'erreur sont exposés.
Clavier: Tab focalise le champ
Entrée envoie la recherche
Tab atteint les contrôles effacer et rechercher

Bindings

form[role=search] with input[type=search]
implementationKind
native
nativeElement
form[role=search] with input[type=search]
ariaPattern
search landmark and searchbox
radixPrimitive
Non applicable
shadcnRecipe
Non applicable
runtimeDependency
Non applicable
packageName
Non applicable
exportName
Non applicable
exactVersion
Non applicable
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Non applicable
validFrom
Non applicable
validUntil
Non applicable
Limite d’équivalence : A plain search field submits a query. Once it presents selectable filtered suggestions, the interaction becomes a Combobox.
Vérifier la source du binding

Sources

WHATWG HTML: The input element
WHATWG · standard · 2026-07-16
Affirmation couverte : Search field: native input types, labeling, state, validation, and form participation.
WHATWG HTML: Forms
WHATWG · standard · 2026-07-16
Affirmation couverte : Search field: native form controls, labels, submission, validation, and disabled-state behavior.

Vérifié le 2026-07-16 · rev. 1

Responsable: SkillCodex Editorial
Statut: review
Relecture: Independent editorial review pending
Prochaine revue: 2026-10-16
Publication: Non publiée
Historique: Brouillon initial sourcé du MVP, en attente de relecture indépendante.