Pattern · lists
Filter group
Filters that apply the moment they change, the result counted aloud, and a list that never goes empty without saying why.
The pattern, live
5 audits affichés.
| Audit | Niveau | Statut | Taux |
|---|---|---|---|
| Démarches en ligne | Niveau AA | Terminé | 85,8 % |
| Portail famille | Niveau AA | En cours | 61,3 % |
| Site de la médiathèque | Niveau A | Terminé | 92,4 % |
| Espace citoyen | Niveau AAA | Brouillon | Pas encore |
| Billetterie du théâtre | Niveau AA | En cours | 48,0 % |
How it works
- The filters are ordinary form controls with their labels; no "Appliquer" button, since the list changes as they do.
- The status is a radio group, since its four options should be seen at once; the level is a select, since "all" is its empty option.
- The count is a live region present from the first render, so each change is said once: "3 audits affichés".
- When nothing matches, the table gives way to an empty state that says which filter to change.
- The table's caption is hidden: the page's heading already names the list, and the caption still names the scroll region.
Rules a page that copies it keeps
- A filter that applies at once never moves the focus.
- The count is a sentence, singular when it is one, and says "aucun" rather than "0".
- The status word is in the cell; the chip's tone only confirms it.