Note: Il existe des versions obsolètes de ce composant. Passez à une version de la documentation antérieure à la version 10.0.x pour consulter cette documentation.
Le composant Liste déroulante propose aux utilisateurs un ensemble d'options parmi lesquelles ils peuvent effectuer une sélection. Les listes déroulantes affichent des options au fur et à mesure, ce qui empêche les utilisateurs de voir trop d'informations en même temps. Elles peuvent également être utilisées pour regrouper des informations. Les listes déroulantes sont toujours accompagnées d'une étiquette ou d'un titre de champ positionné avant le contrôle.
Ce composant se décline en quatre variantes : select, multiple select, combobox et multiple combobox.
La variante multiple select de la liste déroulante permet aux utilisateurs de sélectionner plusieurs options dans une liste.
La liste des sélections est suffisamment complexe pour mériter d'être recherchée et filtrée. Utilisez plutôt la variante multiple combobox.
Il existe un petit nombre d'options (5 ou moins) parmi lesquelles les utilisateurs peuvent choisir. Utilisez des cases à cocher pour les éléments à sélection multiple.
Lorsque vous utilisez la liste déroulante à des fins de tri, pensez à organiser les options dans l'ordre. Par exemple :
Option de la plus courante à la moins courante
Opération de la plus simple à la plus complexe
De l'option la moins risquée à l'option la plus risquée
La première option apparaît en haut de la liste.
Évitez de classer les options par ordre alphabétique sauf si cela a du sens pour votre cas d'utilisation. Une liste de pays ou autres problèmes d'éléments connus peuvent souvent être classés par ordre alphabétique. Cependant, vous devez vous assurer que les utilisateurs verront le nom de leur sélection sans ambiguïté.
Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
Utilisez des verbes au présent et la forme active dans la plupart des cas.
Placez l'étiquette de la liste déroulante en dehors du champ de façon à ce qu'elle soit toujours visible. Une liste déroulante sans étiquette n'est pas accessible.
Ne remplacez pas les étiquettes de champ par du texte générique dans le champ. Cela nuit à la convivialité et a de nombreuses conséquences négatives.
Placez une étiquette permanente en dehors du champ.
N'utilisez pas de texte de l'espace réservé pour remplacer l'étiquette d'un champ.
Veiller à ce que les éléments de menu soient concis
Limitez chaque option de liste déroulante à une ligne de texte. Si le texte est trop long pour tenir sur une ligne, vous pouvez ajouter des points de suspension (...) pour le contenu excédentaire et l'accompagner d'une infobulle basée sur navigateur pour afficher la chaîne complète. Cependant, il est recommandé d'éviter de tronquer le texte si possible.
Veillez à ce que les éléments de menu soient concis.
N'utilisez pas d'éléments de menu longs qui nécessitent une troncature.
Utilisez du texte d'aide pour afficher le contexte et indiquer ce qu'il faut sélectionner ou comment sélectionner une option. Voici quelques exemples de ce que vous pouvez inclure dans le texte d'aide :
Une description générale des options de liste déroulante
Des astuces pour aider l'utilisateur à effectuer la bonne sélection
Plus de contexte pour expliquer pourquoi un utilisateur doit effectuer une sélection
N'utilisez le texte d'aide que pour les informations pertinentes. Évitez d'utiliser un texte d'aide qui reformule simplement les mêmes informations que celles qui apparaissent dans l'étiquette.
Mettez la première lettre de la phrase en majuscule pour le texte d'aide. Rédigez 1 à 2 phrases courtes et complètes qui se terminent par un point.
N'utilisez pas de texte d'aide pour indiquer le contexte.
N'utilisez pas le texte d'aide pour simplement reformuler les mêmes informations que celles qui apparaissent dans l'étiquette.
Utiliser un texte d'erreur pour guider les utilisateurs
Le texte du message d'erreur indique à l'utilisateur comment corriger l'erreur. Dans le cas de la liste déroulante, les erreurs sont souvent liées à un problème qui doit être résolu pour la validation intégrée. Par exemple, si un utilisateur ne sélectionne pas les garanties et qu'il s'agit d'un champ obligatoire, vous pouvez utiliser le texte d'erreur pour guider l'utilisateur vers une solution : « Sélectionnez les garanties d'assurance automobile souhaitées. »
Mettez la 1re lettre du 1er mot en majuscule pour le texte d'erreur. Rédigez 1 à 2 phrases courtes et complètes qui se terminent par un point.
Utilisez le texte d'erreur pour guider l'utilisateur et lui proposer une solution.
Ne rédigez pas de messages d'erreur ambigus ou ne laissez pas les utilisateurs deviner comment résoudre un problème.
Utilisez un astérisque (*) pour indiquer les champs obligatoires. L'astérisque précède l'étiquette du champ. Cela permet aux utilisateurs de localiser facilement les champs devant obligatoirement être renseignés en regardant uniquement le caractère le plus à gauche de l'étiquette.
En plus de marquer les champs obligatoires par un astérisque, il est recommandé d'inclure des instructions claires en haut du formulaire, telles que « Tous les champs marqués d'un astérisque sont obligatoires », afin de vous assurer que les utilisateurs comprennent la signification de l'astérisque.
Utilisez un astérisque pour signaler qu'un champ est obligatoire.
N'utilisez pas d'astérisque pour signaler quelque chose qui est facultatif.
La variante « multiple select » apparaît sans valeur (par défaut), sans texte fictif ou sans entrée renseignée.
Visuel
État
Description
Aucune valeur (par défaut)
Indique à l'utilisateur qu'aucune valeur n'a été sélectionnée et qu'il n'y a pas d'espace réservé.
Espace réservé
Indique à l'utilisateur qu'aucune valeur n'a été sélectionnée. L'espace réservé est grisé.
Entrée renseignée
Indique à l'utilisateur que l'entrée est renseignée.
La sélection multiple a également des états interactifs pour activé, focus, désactivé, erreur, lecture seule, et affichage uniquement.
État
Description
Activé
Indique à l'utilisateur que l'élément est prêt à interagir.
Focus
Indique à l'utilisateur l'élément de l'interface utilisateur sur lequel le système est centré.
Désactivé
Indique à l'utilisateur que la valeur de saisie ne peut pas être modifiée en raison de facteurs locaux. Par exemple, une case à cocher située au-dessus du champ de saisie doit être cochée pour accéder à ce champ de saisie. Un utilisateur peut effectuer une action pour l'activer en interagissant avec la page.
Erreur
Indique que l'utilisateur a commis une erreur de validation. Le texte d'erreur permet aux utilisateurs d'apporter une correction.
Lecture seule
Indique à l'utilisateur que la valeur de saisie ne peut pas être modifiée en raison de facteurs externes. Par exemple, pas d'accès en écriture. Un utilisateur peut effectuer une action pour l'activer, par exemple en contactant un administrateur.
Affichage uniquement
L'état Affichage uniquement est utilisé dans deux cas :
Un élément d'interface utilisateur est utilisé en mode affichage.
Un élément d'interface utilisateur est affiché en mode édition, mais il n'est jamais modifiable.
Cet état était auparavant appelé « lecture seule ».
L'image suivante illustre les états interactifs de la sélection multiple.
La liste déroulante est développée et réduite à l'aide de la barre d'espace. Les utilisateurs naviguent parmi les options à l'aide des touches fléchées et les sélectionnent à l'aide de la barre d'espace ou de la touche Entrée.
aria-labelledby crée une association programmatique entre le champ de saisie et son étiquette. L'attribut WAI-ARIA de aria-autocomplete='list' informe qu'une liste dans laquelle l'utilisateur peut faire un choix apparaîtra, mais la zone de modification reste active. La sélection de l'option « obligatoire » dans Storybook ajoute les attributs « required » et « aria-required="true" » au champ de saisie.
Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :
Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.
La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.
Lorsque vous utilisez ce composant dans votre application :
Facilitez la compréhension du contenu, pour les utilisateurs, en évitant les noms d'option très longs.
Évitez d'utiliser des éléments totalement focalisables tels que des boutons, des cases à cocher et des liens, ou du contenu totalement sémantique, tel que des titres, dans vos composants de liste déroulante.
Note: Il existe des versions obsolètes de ce composant. Passez à une version de la documentation antérieure à la version 10.0.x pour consulter cette documentation.
Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.
Warning: La transmission d'options enfant au composant MultipleSelect autre que SelectOption n'est pas prise en charge. Bien que cela puisse fonctionner, des comportements inattendus peuvent en résulter ou la transmission peut être affectée par des modifications introduites dans des versions ultérieures.
If set to true, the tags are displayed permanently in expanded view. This overrides the default behavior where excess tags collapse into a tag containing aggregated options.
Value of the component. Takes precedence over initialValue. If this prop is passed, component works in controlled mode and its value will change only if this prop changes.
Lorsque les balises des options sélectionnées dépassent l’espace du composant, certaines d’entre elles se réduisent en une seule balise qui indique le nombre d’options sélectionnées qui ne sont pas affichées. Lorsque vous cliquez sur cette balise, le composant se développe verticalement pour afficher toutes les balises des options sélectionnées. Une fois développées, les balises d’options ne peuvent pas être réduites.
Pour remplacer ce comportement et afficher toutes les balises d’option de façon permanente dans une vue développée, définissez la propriété tagsAlwaysExpanded sur true. Pour comparer les deux comportements, reportez-vous aux exemples.
Tous les composants Liste déroulante définissent la liste des options disponibles via la propriété children de type ReactNode. Vous pouvez utiliser uniquement les sous-composants suivants comme enfants :
SelectOption utilisé par Select et MultipleSelect
ComboboxOption utilisé par Combobox et MultipleCombobox
Warning:
SelectOption et ComboboxOption doivent uniquement être utilisés dans le contexte de leur composant « parent » respectif. Bien qu'ils puissent fonctionner individuellement, cela n'est pas pris en charge.
Les composants Select et MultipleSelect sont conçus uniquement pour accepter les composants SelectOption en tant qu'enfants. Bien qu'ils puissent afficher ou gérer d'autre types ou éléments HTML, cela n'est pas pris en charge.
Les composants Combobox et MultipleCombobox sont conçus uniquement pour accepter les composants ComboboxOption en tant qu'enfants. Bien qu'ils puissent afficher ou gérer d'autre types ou éléments HTML, cela n'est pas pris en charge.
Toute utilisation de ces composants en dehors de leur champ d'application pris en charge tombe en dehors de la validation de modifications majeures car une telle utilisation n'est pas considérée comme faisant partie du cahier des charges des composants. Ces utilisations peuvent entraîner des comportements inattendus ou être affectées par des modifications introduites dans des versions ultérieures.
Les entrées Jutro ont implémenté des gestionnaires impératifs en tant que mécanisme permettant d'accéder à certaines fonctionnalités natives communes susceptibles de vous être utiles. Les fonctionnalités suivantes sont disponibles :
Définir le focus pour vous permettre de définir le focus utilisateur dans un composant spécifique
Flou pour supprimer le focus du composant
Faire défiler l'écran jusqu'au composant pour pouvoir amener l'utilisateur à une zone spécifique de la page.
Ces fonctionnalités sont fournies via la propriété ref, qui les expose comme suit :
Bien que certains composants de Jutro puissent fournir des fonctionnalités complémentaires ou une fonction d'aide pour faciliter le processus de validation, il vous appartient, en tant que développeur, de gérer la validation de toute entrée utilisateur (en utilisant ou non les fonctions d'aide complémentaires) et de déterminer les messages d'erreur à afficher.
Le comportement des composants Jutro est basé sur l'implémentation du développeur.
Quand est-ce que des messages d'erreur s'affichent ?
Les messages d'erreur ne s'affichent que lorsque vous les transmettez au composant via la propriété stateMessages. Cette propriété reçoit un objet avec le contenu suivant :
Le composant affiche chaque message d'erreur fourni dans le même ordre que dans la série.
Quand la validation a-t-elle lieu ?
Cette décision vous revient en tant que développeur. Étant donné que les composants ne déterminent pas le moment où la validation est effectuée ou le moment où l'erreur doit être affichée, vous devez implémenter la logique pour la traiter en fonction des exigences du projet, par exemple lorsque l'utilisateur modifie le contenu, lorsque le composant active une autre fenêtre et lors de la soumission du formulaire.
Note: Il existe des versions obsolètes de ce composant. Passez à une version de la documentation antérieure à la version 10.0.x pour consulter cette documentation.
Consultez la section Utilisation pour savoir comment et quand utiliser MultipleSelect et les onglets spécifiques pour en savoir plus sur les fonctionnalités proposées par chaque composant.
Note: La plupart des fonctionnalités et propriétés des quatre composants Liste déroulante fournis ne sont pas différentes dans leur utilisation. Certains exemples d'autres composants peuvent être pertinents pour MultipleSelect également.
Vous pouvez désactiver complètement n'importe lequel des composants Liste déroulante en définissant la propriété disabled sur true. Vous pouvez également désactiver des options spécifiques à l'aide de la propriété disabled des composants SelectOption et ComboboxOption. Dans ce cas, l'ensemble du composant est désactivé et la propriété disabled des options n'a aucun effet.
Il s'agit d'un comportement commun à tous les composants Liste déroulante : lorsque la propriété value est définie, l'utilisateur ne peut pas modifier directement le composant ; il sera géré entièrement par l'implémentation du développeur.
Cet exemple est applicable à tous les composants Liste déroulante :
exportfunctionMultiSelectControlled(){ const[updatedValue, setNewValue]=useState([]); constonChange=(e, newValue)=>{ setNewValue(newValue); }; const options =[ <SelectOption value={{ id:'1', label:'Option 1', }} />, <SelectOption value={{ id:'2', label:'Option 2', }} />, <SelectOption value={{ id:'3', label:'Option 3', }} />, <SelectOption value={{ id:'4', label:'Option 4', }} />, <SelectOption value={{ id:'5', label:'Option 5', }} />, ]; return( <div> <MultipleSelect label="Choose values" secondaryLabel="This value will be passed to the list of options below" onChange={onChange}> {options} </MultipleSelect> <br/> <MultipleSelect label="Changes with the above" value={updatedValue}> {options} </MultipleSelect> </div> ); }
Il est possible, à l'aide de la propriété ref et des gestionnaires impératifs fournis (« focus », « blur » et « scrollIntoView »), d'exécuter différentes actions natives. Définir le focus sur le composant en est un exemple.
Voir l'exemple ci-dessous avec le composant Select :
Les composants Liste déroulante ne gèrent pas le processus de validation, mais vous pouvez gérer le statut et les messages d'erreur à afficher à l'aide de la propriété stateMessages.
La logique des messages d'état fonctionne pour tous les composants Liste déroulante. Un exemple de MultipleSelect est illustré ci-dessous :
Le comportement par défaut du composant MultipleSelect consiste à r éduire les balises d’option lorsqu’elles ne peuvent pas tenir sur une seule ligne. Le composant se développe en une vue multiligne lorsque vous cliquez sur la balise contenant les options agrégées. Ce comportement est contrôlé par la propriété tagsAlwaysExpanded et, par défaut, il est défini sur false.
Pour activer l’effacement de la saisie d’un simple clic sur le bouton d’icône, définissez la propriété effaçable sur true. Le bouton apparaît lorsqu'au moins une option est sélectionnée. Il permet à l’utilisateur de désélectionner les options sélectionnées en une seule fois.
Ajout de la propriété tagsAlwaysExpanded qui, lorsqu’elle est définie sur true, remplace le comportement par défaut Balises d’option réduites.
Ajout de la propriété clearable, qui, lorsqu’elle est définie sur true, permet à l’utilisateur d’effacer les options sélectionnées en cliquant simplement sur le bouton d'icône.
Nouveau composant @jutro/components/MultipleSelect introduit.
Le composant précédent DropdownSelectField est obsolète et a été déplacé vers le package @jutro/legacy. Pour afficher la documentation correspondante, passez à une version de la documentation antérieure à la version 10.0.
Structure du composant Liste déroulante, variante multiselect
