L’indicateur d'étape permet d’indiquer à l’utilisateur où il se trouve dans un formulaire ou dans une démarche.
DocumentationL'indicateur d'étape peut contenir de 2 à 8 étapes.
Il doit être placé dans un conteneur de 6 à 8 colonnes de large en desktop, et 100% (12 colonnes) en mobile.
Le niveau de titre h2 peut être modifié suivant le contexte
Étape suivante : Titre de la prochaine étape
<div class="fr-stepper">
<h2 class="fr-stepper__title">
<span class="fr-stepper__state">Étape 1 sur 3</span>
Titre de l’étape en cours
</h2>
<div class="fr-stepper__steps" data-fr-current-step="1" data-fr-steps="3"></div>
<p class="fr-stepper__details">
<span class="fr-text--bold">Étape suivante :</span> Titre de la prochaine étape
</p>
</div>
Étape suivante : Titre de la prochaine étape
<div class="fr-stepper">
<h2 class="fr-stepper__title">
<span class="fr-stepper__state">Étape 2 sur 8</span>
Titre de l’étape en cours
</h2>
<div class="fr-stepper__steps" data-fr-current-step="2" data-fr-steps="8"></div>
<p class="fr-stepper__details">
<span class="fr-text--bold">Étape suivante :</span> Titre de la prochaine étape
</p>
</div>