Indicateur d’étapes (Stepper)

Utilisez l’indicateur d’étapes pour montrer la progression dans un parcours linéaire.

info

Ce composant est inclus dans l’offre Community.

Information	Valeur
Niveau	Community
Composants Twig	dsfr:stepper

Usage

• Le composant est informatif et ne contient pas de navigation.
• La valeur courante doit être comprise entre 1 et le nombre total d’étapes.

Modes d'utilisation

Exemple principal

Indicateur d’étapes · exemple principal

<twig:dsfr:stepper
  title="Informations personnelles"
  currentStep="2"
  stepCount="4"
  nextStep="Justificatifs"
/>

Attributs HTML

Ajoutez vos attributs applicatifs directement sur le composant quand ils concernent le nœud racine rendu par le template.

Attributs pass-through

<twig:dsfr:stepper
  id="indicateur-etapes-example"
  class="fr-mt-2w"
  data-controller="indicateur-etapes"
/>

API publique

Composant	Rôle
dsfr:stepper	Composant principal de cette page.

Configuration

Option	Type	Défaut / requis	Valeurs et usage
title	string	Requis ou défaut selon composant	Titre visible du composant.
currentStep	int|string	Requis	Étape courante, de 1 à stepCount.
stepCount	int|string	Requis	Nombre total d’étapes.
nextStep	string	""	Libellé de l’étape suivante.
markup	enum	h2	h1 à h6.

Guide d'intégration

Question	Réponse
Famille DSFR	Contenu
Quand l'utiliser	Quand vous présentez, organisez ou approfondissez un contenu éditorial ou métier.
Quand éviter	Pour les contrôles de formulaire ou la navigation principale, sauf si le composant expose explicitement cette interaction.
API publique	Utilisez uniquement les composants Twig listés sur cette page : dsfr:stepper.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Indicateur d’étapes : options, accessibilité et rendu DSFR

Variantes de indicateur d’étapes

• indicateur d’étapes avec attributs HTML pass-through pour id, class, data-* et aria-* quand le template le permet.

Points de contrôle propres à ce composant

• Le composant est informatif et ne contient pas de navigation.
• La valeur courante doit être comprise entre 1 et le nombre total d’étapes.

Accessibilité contenu

• Respectez la hiérarchie de titres de la page.
• Les images informatives ont un alt utile ; les images décoratives ont un alt vide.
• Les contenus masqués ou ouverts doivent rester pilotables au clavier.

Intégration Symfony/Twig pour dsfr:stepper

• Ajoutez vos attributs applicatifs (data-controller, data-action, aria-*, class) sur dsfr:stepper quand ils concernent son nœud racine.

Checklist de recette

• ordre de lecture cohérent
• titres dans le bon niveau
• contenu disponible sans souris
• rendu vérifié en thème clair et sombre ;
• rendu vérifié sur mobile, tablette et desktop ;
• aucune erreur dans le profiler DSFR ni dans l'inspecteur d'accessibilité du navigateur.

Erreurs fréquentes

Symptôme	Correction
Les classes DSFR semblent incomplètes	Utilisez les props du composant plutôt que des classes ajoutées à la main.