Indicateur d'étape

L’indicateur d'étape permet d’indiquer à l’utilisateur où il se trouve dans un formulaire ou dans une démarche.

Cet indicateur d'étape est utilisable dans le cas d’un processus linéaire, le composant ne permet pas de naviguer d’une étape à une autre (pour cela, il faudra utiliser des boutons).

Ce composant est disponible depuis la version 1.6

Nous sommes attentifs à vos retours afin de pouvoir apporter des corrections si nécessaire. Soyez vigilant quant à son utilisation en production !

Structure

L’indicateur d'étape est constitué des éléments suivants :

  • Le numéro de l'étape et le nombre d'étapes total - obligatoire
  • le titre de l'étape en cours - obligatoire
  • la barre de progression - obligatoire
  • le titre de l'étape suivante - obligatoire.

La barre de progression contient autant de sections qu’il y a d'étapes, les étapes validées et l'étape en cours sont en bleu.

Aucun des éléments de l’indicateur d'étape n’est cliquable.

Étape 1 sur 3 Titre de l’étape en cours

É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 4 sur 4 Titre de la dernière étape en cours

                <div class="fr-stepper">
    <h2 class="fr-stepper__title">
        <span class="fr-stepper__state">Étape 4 sur 4</span>
        Titre de la dernière étape en cours
    </h2>
    <div class="fr-stepper__steps" data-fr-current-step="4" data-fr-steps="4"></div>
</div>

                
              

Règles d’utilisation

Usages

L’indicateur d'étape ne sert pas à naviguer d’une étape à l’autre, pour cela utiliser des boutons en bas des champs de l'étape.

Il est conseillé de finir par une étape de confirmation. Il est aussi conseillé de créer une page d’introduction à la démarche, avant de commencer cette dernière pour présenter les différentes étapes, sur laquelle ne figure pas cet indicateur d’étapes. Voir le modèle de formulaire (À venir).

Contenus

  • Chaque étape doit avoir un titre clair, unique et ne comprenant pas le numéro de l'étape (car on l’a déjà dans le champ numéro de l'étape).
  • À la dernière étape, le titre de l'étape suivante n’est pas à afficher.

Accessibilité

  • Le titre de l’étape est bien dans un élément <hx>
  • Le numéro de l’étape et le nom de l'étape suivante sont dans des éléments <p>
  • La barre de progression ne nécessite aucune alternative ni attribut aria (car purement illustrative).

Personnalisation

Le style de ce composant n’est pas personnalisable.

Besoin d'aide ?

L'équipe du DSFR est là pour vous aider.

Retrouvez-la sur :