Le composant Search / Input permet à l’utilisateur de saisir une requête textuelle pour rechercher du contenu au sein d’une page ou d’une section. Il fonctionne comme un champ de saisie classique, mais avec un objectif de recherche ciblée.
Il est conçu pour des usages simples, autonomes et contextuels, à l’intérieur d’un bloc ou d’une page.

 

Localisation :

Le champ de recherche peut être placée dans diverses parties de l'interface utilisateur en fonction de son utilisation spécifique. Voici quelques exemples d'emplacements courants :

• Formulaires: Intégrez la zone de texte dans les formulaires lorsque vous avez besoin que les utilisateurs saisissent des informations détaillées
• Boîtes de dialogue : telles que les modales ou les fenêtres contextuelles
• Pages de profil utilisateur : Si vous avez besoin que les utilisateurs fournissent des informations détaillées sur leur profil
• Zones de commentaires ou de discussion : Dans les interfaces où les utilisateurs peuvent laisser des commentaires, ou participer à des discussions.
• Tableau

---

Assistance utilisateur

Les éléments d'assistance fournissent des détails supplémentaires sur le texte saisi dans les champs de saisie.

 

Infobulle

L'option infobulle permet d'afficher une icône à côté du label qui fournit des informations contextuelles lorsqu'elle est survolée (ou au focus) ou cliquée à l'aide du composant infobulle.

Texte d'aide

Le texte d'aide donne des indications supplémentaires sur le champ de saisie, comme la manière dont il sera utilisé. Il ne doit occuper qu'une seule ligne pour simplifier sa compréhension.

Il doit décrire le format attendu, si celui-ci est spécifique.

Message d'erreur

Le message d'erreur vient apporter des informations supplémentaires à l'utilisateur lors de la complétion ou lors de la validation d'un formulaire.

Il doit expliciter la cause de l'erreur, et fournir une suggestion de correction si nécessaire.

Comportement général

Le comportement général d'un champ de texte comprend les aspects suivants :

 

Saisie de texte :

Les utilisateurs peuvent entrer du texte dans le champ en utilisant le clavier ou d'autres dispositifs d'entrée appropriés. Le texte saisi s'affiche en temps réel dans le champ de texte.

 

Édition de texte :

Les utilisateurs peuvent sélectionner, copier, couper et coller du texte à l'intérieur du champ. Ils peuvent également déplacer le curseur de texte pour effectuer des modifications ou naviguer à travers le contenu.

 

Réactivité au clavier :

Les champs de texte doivent permettre la navigation au clavier en utilisant les touches de tabulation pour passer d'un champ à l'autre et les touches de direction pour déplacer le curseur de texte à l'intérieur du champ.

 

Retour visuel :

Les champs de texte doivent fournir un retour visuel clair pour indiquer l'état du champ, tel que la mise en évidence lorsque le champ a le focus ou lorsqu'il y a une erreur de saisie.

 

Effacement du contenu :

Les utilisateurs doivent avoir la possibilité d'effacer ou de supprimer le contenu du champ de texte, que ce soit en utilisant la touche de suppression ou en cliquant sur un bouton d'effacement intégré.

 

Validation de saisie :

Les champs de texte peuvent inclure des mécanismes de validation pour vérifier que la saisie répond à certaines conditions, par exemple en vérifiant la longueur du texte, le format ou l'exactitude des données saisies.

 

Compatibilité avec les dispositifs tactiles :

Les champs de texte doivent prendre en charge les interactions tactiles pour les utilisateurs qui interagissent avec l'interface via des écrans tactiles, en permettant la saisie et la modification du texte de manière intuitive.