Stepper — Validation Status

block

Semantic status per step in a verification flow: success shows a green check, error a red glyph, accent the in-progress step. Status sets the indicator color and glyph only, never the connector, and is announced to assistive tech as text.

pnpm dlx shadcn@latest add "https://astryx.atmeta.com/shadcn/example-stepper-validation-status.json"

Sign In

Stepper — Validation Status

block

Semantic status per step in a verification flow: success shows a green check, error a red glyph, accent the in-progress step. Status sets the indicator color and glyph only, never the connector, and is announced to assistive tech as text.

pnpm dlx shadcn@latest add "https://astryx.atmeta.com/shadcn/example-stepper-validation-status.json"

components/astryx/examples/StepperStatus.tsx