Skip to main content

# Liste de Sélection

## Sélection simple

La liste de sélections est un des composants les plus courant des formulaires de saisie. Elle permet de faciliter la sélection d'un ou plusieurs item d'une liste dans un espace réduit. Voici un rappel de quelques règles de bonne pratique concernant leur usage.

### Taille minimale de la liste

Si la liste est courte (3-4 choix) et que l'espace le permet, il peut être préférable d'afficher tous les items sous forme de case à cocher ou de groupe de boutons.

Cause des soins
Cause des soins
Maladie Maternité Accident privé Accident du travail
Cause des soins
Maladie Maternité Accident privé Accident du travail

### Tri de la liste et anticipation des choix

La liste doit être triée selon un ordre cohérent pour l'utilisateur. Il ne faut pas hésiter à créer des regroupements d'items pour en faciliter la lecture. Pour des listes longues on pourra proposer les items les plus fréquemment utilisés en tête de liste.

### Liste filtrable

Lorsque la liste dépasse une vingtaine d'items, il faut envisager de lui adjoindre une fonction de filtrage à l'aide du composant Chosen.js qui permet d'enrichir les fonctionnalités des listes de sélection.

## Sélection multiple

Dans certains cas d'usage il est nécessaire de pouvoir sélectionner plusieurs items à partir d'une seule liste.

### Sélection multiple basique

Lorsque la liste est simple, il est possible, comme pour les listes à sélection unique, d'utiliser le composant natif ou des alternatives à base de case à cocher ou de groupe de boutons. A noter que le composant natif n'est pas utilisé en dehors des applications professionnels car sa fonctionnalité ctrl+click pour sélectionner n'est pas suffisamment connue des utilisateurs grands public.

Documents fournis
ctrl + click pour réaliser une sélection multiple
Documents fournis
Carte Vitale Attestation de droit Attestation de résidence Carte d'identité
Documents fournis
Carte Vitale Attestation de droit Attestation de résidence Carte d'identité

### Sélection multiple complexe

Lorsque la liste de sélection est longue, il est nécessaire d'afficher séparément un récapitulatif des éléments sélectionnés. On utilise alors pour ce faire une seconde liste ou un champs de saisie. La solution à base d'une double liste n'est pas actuellement supporté par le framework. En revanche, le composant Chosen.js possède des fonctionnalités qui combinent le filtrage de la liste et l'affichage des items sélectionnés sous forme de tag.