Navigation

Étapes

الخطواتStepper

Stablesrc/dsm/components/stepper.tsx
Deux composants pour les démarches en plusieurs étapes : `StepIndicator` (en-tête de progression compact, avec la prochaine étape) et `Steps` (récapitulatif complet des étapes avec leur statut).

Import

import { StepIndicator } from "@/dsm/components/stepper";

Exemples

En-tête de progression

Étape courante, titre et barre segmentée, avec l'étape suivante annoncée.

LTR

Étape 2 sur 4

Téléversez vos pièces justificatives

Étape suivante : Choisissez votre bureau de retrait

Étapes horizontales

Récapitulatif complet, statuts terminé / en cours / à venir.

LTR
  1. Terminée

    Informations personnelles

  2. Terminée

    Pièces justificatives

  3. 3En cours

    Choix du bureau

  4. 4À venir

    Confirmation

Étapes verticales

Même récapitulatif, adapté à une colonne étroite.

LTR
  1. Terminée

    Dossier reçu

    Reçu le 3 septembre 2026

  2. 2En cours

    En cours d'instruction

    Vérification des pièces par la DGSN

  3. 3À venir

    Carte en fabrication

  4. 4À venir

    Disponible au retrait

Parcours de démarche

L'en-tête de progression au-dessus d'un extrait de formulaire.

LTR

Étape 3 sur 4

Choisissez votre bureau de retrait

Étape suivante : Vérification et confirmation

Usage

Quand l'utiliser

  • Utilisez `StepIndicator` en haut d'un formulaire multi-étapes, pour situer l'utilisateur et annoncer la suite.
  • Utilisez `Steps` pour un récapitulatif complet — page de suivi de dossier, confirmation, sommaire latéral.
  • Choisissez l'orientation `vertical` de `Steps` dans une colonne étroite, `horizontal` sur toute la largeur d'une page.

Quand ne pas l'utiliser

  • N'utilisez pas ces composants pour un contenu qui n'a pas d'ordre imposé : les onglets conviennent mieux.
  • Ne dépassez pas 5 à 6 étapes en orientation horizontale : au-delà, les libellés se chevauchent visuellement.

Accessibilité & langues

Accessibilité

  • La barre de progression de `StepIndicator` porte `role="progressbar"` avec `aria-valuenow`/`aria-valuemin`/`aria-valuemax`.
  • Chaque puce de `Steps` porte un texte masqué (« Terminée », « En cours », « À venir ») : le statut n'est jamais porté par la seule couleur ou forme.

RTL & multilingue

  • La barre segmentée et les connecteurs de `Steps` sont des blocs neutres (pas de flèche) : rien à retourner en RTL.
  • L'ordre des étapes suit le sens de lecture grâce à `flex` standard, sans classe `rtl:` dédiée.

Propriétés

StepIndicator
PropriétéTypeDéfautDescription
step*number—Numéro de l'étape courante (base 1).
totalSteps*number—Nombre total d'étapes.
title*ReactNode—Titre de l'étape courante.
nextTitleReactNode—Titre de l'étape suivante ; omis à la dernière étape.
Steps
PropriétéTypeDéfautDescription
steps*{ label: ReactNode; description?: ReactNode }[]—Liste ordonnée des étapes.
current*number—Étape en cours (base 1) : les précédentes sont terminées, les suivantes à venir.
orientation"horizontal" | "vertical"horizontalDisposition du récapitulatif.

Composants liés