Multi-Level Selector - Design System Variants

Déclencheurs (état fermé) + Panel Drill-down

Même panel (drill-down), différents déclencheurs pour l'état fermé

A. Tags inline + Drill-down

Les éléments sélectionnés apparaissent en tags. "+X" si trop nombreux.

B. Résumé textuel + Drill-down

Affiche un résumé "3 pays, 5 régions, 12 villes" + compteur total.

C. Bouton compteur + Drill-down

Bouton simple avec label fixe + badge compteur.

D. Input recherche + Drill-down

Champ de recherche directement visible. Ouvre le panel au focus.

E. Hybride (tags + search) + Drill-down

Combine tags visibles (max 2) + compteur + zone de recherche.

Panels (état ouvert) + Trigger Tags

Même déclencheur (tags), différents panels pour la navigation

6. Panel Miller Columns

Navigation en colonnes côte à côte (style Finder Mac). Idéal pour visualiser la hiérarchie complète.

7. Panel 2 zones (Navigation + Sélection)

Zone gauche pour naviguer, zone droite pour voir/gérer la sélection en temps réel.

8. Panel Tree View (Arbre dépliable)

Arbre classique avec expand/collapse. Familier pour les utilisateurs techniques.

9. Panel avec Onglets par niveau

Un onglet par niveau (Continent, Pays, Région...). Accès direct à tous les items d'un niveau.

Combinaisons recommandées

Les meilleures associations déclencheur + panel selon le cas d'usage

10. Usage simple (peu de sélection)

Bouton + Drill-down : Compact, intuitif, suffisant pour 1-5 sélections.

11. Usage avancé (sélection multiple)

Tags + Panel Dual : Visibilité sur la sélection, gestion facile, fil d'Ariane.

12. Power user (exploration rapide)

Search + Miller : Recherche directe + vue hiérarchique complète.

Notes de design

Comportements communs

Sélection indépendante : Sélectionner "France" ne sélectionne pas ses enfants automatiquement
Multi-niveau : On peut mixer France (pays) + Catalogne (région) + Berlin (ville)
Recherche globale : Cherche dans tous les niveaux, affiche le fil d'Ariane dans les résultats
Fil d'Ariane cliquable : Permet de remonter dans la hiérarchie
Double-clic : Drill-down vers les enfants (si disponible)
Escape : Ferme le panel
Clic extérieur : Ferme le panel

Structure des données

Monde (niveau 0)
├── Europe (niveau 1)
│   ├── France (niveau 2)
│   │   ├── Île-de-France (niveau 3)
│   │   │   ├── Paris (niveau 4)
│   │   │   │   ├── Le Marais (niveau 5)
│   │   │   │   ├── Montmartre (niveau 5)
│   │   │   │   └── ...
│   │   │   └── Boulogne-Billancourt (niveau 4)
│   │   └── Auvergne-Rhône-Alpes (niveau 3)
│   ├── Espagne (niveau 2)
│   └── ...
├── Amérique du Nord (niveau 1)
└── Asie (niveau 1)

Recommandations

Cas d'usage	Déclencheur	Panel	Pourquoi
Sélection rapide (1-3 items)	Bouton	Drill-down	Compact, peu de clics
Sélection multiple visible	Tags	Dual	Feedback immédiat, gestion facile
Exploration hiérarchique	Tags	Miller	Vue d'ensemble, navigation rapide
Recherche directe	Search	Drill-down / Miller	Accès immédiat à la recherche
Utilisateurs techniques	Tags	Tree	Pattern familier (explorateur fichiers)
Accès par niveau	Résumé	Tabs	Voir tous les items d'un niveau

Multi-Level Selector - Toutes les variantes