Zone de liste déroulante

Utilisation d’un composant en cours d’élaboration

Cette version est en cours d’élaboration et n’a pas encore été finalisée pour le Système de conception pour l’Ontario. Elle comprend actuellement des maquettes préliminaires dans Figma et des lignes directrices provisoires, mais aucun code correspondant n’est encore disponible.

Les équipes peuvent utiliser ce composant comme point de départ, mais elles pourraient devoir effectuer des recherches supplémentaires et adapter les conceptions à leurs besoins particuliers.

Exemple 1 : Sélection unique

---

Exemple 2 : Sélection multiple

---

Pour demander l’accès au fichier du composant en cours d’élaboration, écrivez à design.system@ontario.ca.

Quand utiliser ce composant

Utilisez une zone de liste déroulante lorsque :

• les utilisateurs doivent sélectionner une ou plusieurs options dans une liste de 15 éléments ou plus;
  • si la liste compte moins de 15 éléments et que les utilisateurs n’ont qu’une seule option à sélectionner, utilisez plutôt le composant de liste déroulante standard;
• il serait long ou difficile de parcourir toutes les options à la fois;
• les utilisateurs ne connaissent peut-être pas le nom exact de l’option recherchée, mais peuvent la trouver en saisissant une partie de celui-ci.

Quand ne pas utiliser ce composant

N’utilisez pas une zone de liste déroulante lorsque :

• il n’y a que quelques options qui peuvent facilement être présentées sous forme de boutons radio ou dans une liste déroulante standard;
• les utilisateurs doivent saisir du texte libre plutôt que choisir parmi des options prédéfinies;
• les utilisateurs doivent examiner attentivement et comparer toutes les options disponibles avant de faire un choix, puisque le filtrage peut masquer certaines options pertinentes.

Pratiques exemplaires

Lors de la conception ou de la mise en œuvre d’une zone de liste déroulante :

• veillez à ce que le champ de saisie et la liste d’options soient accessibles au clavier, notamment pour la navigation, la sélection et la fermeture de la liste d’options;
• utilisez des libellés d’option clairs et cohérents qui correspondent à la façon dont les utilisateurs réfléchissent;
• pour les interactions de recherche :
  • affichez des suggestions dès que l’utilisateur saisit le premier caractère valide;
  • affichez un message utile lorsqu’aucun résultat ne correspond à la saisie de l’utilisateur;
  • ne lancez pas automatiquement la recherche lorsqu’une suggestion est sélectionnée; exécutez l’action uniquement après une confirmation explicite de l’utilisateur (par exemple, lorsqu’il clique sur un bouton Rechercher).

Ces lignes directrices ne sont pas exhaustives. Il pourrait être nécessaire d’effectuer des recherches supplémentaires afin de s’assurer que le composant répond aux besoins des utilisateurs et respecte les pratiques exemplaires.

Faites-nous part de vos constatations

Si votre équipe utilise ou met à l’essai cette version préliminaire, nous vous encourageons à nous faire part de vos constatations. Vos commentaires contribueront à l’amélioration future du composant.

Écrivez-nous à design.system@ontario.ca.