À retenir
- Hybride : combine saisie libre et sélection assistée.
- Gain de place : ne prend pas plus de place qu'un champ de texte classique au repos.
- Flexibilité : idéale pour les listes de choix non exhaustives.
Une boîte combinée est un élément d'interface graphique qui mélange deux outils en un seul : une zone de texte où l'on peut écrire librement et une liste déroulante pour choisir une option prédéfinie. C'est comme un menu de cafétéria où vous pouvez soit choisir le plat du jour, soit demander un sandwich personnalisé.
Étymologie
Traduction directe de l'anglais combo box (contraction de combination box). Le terme illustre la fusion de deux composants classiques des fenêtres informatiques : le champ de saisie (text box) et la liste de choix (list box). Elle s'est popularisée avec l'essor des systèmes d'exploitation graphiques dans les années 1990.
Exemples d'usage
- Le sélecteur de polices de caractères dans un logiciel comme Word : on peut faire défiler la liste ou taper directement "Arial".
- Le champ de recherche d'un navigateur internet qui propose des suggestions tout en permettant d'écrire une adresse précise.
- La sélection de la taille du papier dans les options d'impression.
Cas d'usage
Ce composant est utilisé dans le développement d'applications et de sites web pour optimiser l'espace à l'écran. Il est particulièrement utile lorsqu'une liste de choix est longue mais que l'utilisateur connaît déjà précisément ce qu'il souhaite saisir.
Bonnes pratiques
Pour une bonne expérience utilisateur, il est recommandé de classer les éléments de la liste par ordre alphabétique ou par fréquence d'utilisation. Il faut également s'assurer que la liste reste exploitable sur les écrans tactiles, où la saisie au clavier et le défilement peuvent parfois entrer en conflit.
Synonymes
Antonymes
Conseil
Si vous développez pour le web, utilisez la balise HTML <datalist> associée à un <input>. Cela permet de créer une boîte combinée native très légère qui s'adapte automatiquement au style du navigateur de l'utilisateur.
Questions fréquentes
Quelle est la différence avec une liste déroulante classique ?
La liste déroulante classique (select) oblige l'utilisateur à choisir uniquement dans la liste. La boîte combinée autorise l'utilisateur à saisir sa propre valeur au clavier.
Est-ce accessible aux personnes malvoyantes ?
Oui, à condition que le développeur utilise les balises appropriées (comme ARIA en web) pour que les lecteurs d'écran indiquent qu'il s'agit d'un champ modifiable avec des suggestions.