Composant · Feedback

ProgressIndicator

Stable

Suite d’étapes ordonnées avec statuts complete/current/upcoming/invalid/disabled, orientation horizontale ou verticale, et icônes Lucide `Check` et `X`.

Exemples

Orientation horizontale

Compte Identité créée
Profil En cours
3 Facturation
4 Vérification

Voir le code (Svelte)

<ProgressIndicator
  items={[{"value":"account","label":"Compte","description":"Identité créée","status":"complete"},{"value":"profile","label":"Profil","description":"En cours","status":"current"},{"value":"billing","label":"Facturation","status":"upcoming"},{"value":"review","label":"Vérification","status":"upcoming"}]}
  label="Création de compte"
/>

Orientation verticale

Brouillon
Validation Erreur de saisie
3 Publication
4 Archivage

Voir le code (Svelte)

<ProgressIndicator
  vertical
  items={[{"value":"draft","label":"Brouillon","status":"complete"},{"value":"validation","label":"Validation","description":"Erreur de saisie","status":"invalid"},{"value":"publish","label":"Publication","status":"upcoming"},{"value":"archive","label":"Archivage","status":"disabled"}]}
  label="Publication"
/>

API

Prop	Type	Default
`items`	`ProgressIndicatorItem[]`	requis
`vertical`	`boolean`	`false`
`label`	`string`	`"Progress"`
`class`	`string`	optionnel

Le composant rend une <ol aria-label> dont chaque <li> reçoit aria-current="step" pour le statut current. Chaque item suit la forme { value, label, description?, status? } où status vaut "complete" | "current" | "upcoming" | "invalid" | "disabled" (défaut "upcoming"). Les icônes Lucide affichées sont Check (complete) et X (invalid) ; les autres statuts utilisent le numéro de l’étape ou un point CSS pour current. Les autres props <ol> HTML sont transmises via spread.