F1 component kit/Forms and editing/Stepper and step railDesktop

Stepper and step rail

F1 variant17 · stepper

The six import steps with done / current / error / locked, and the step rail's second job: the long-form section nav for the 130 A03 pages (scroll-spy, an error count per section, jump to the first error).

Covers: stepper primitive, stepper designer, step-rail primitive, step-rail designer. Exports: Stepper, SectionNav.

Whole page:Phone is fixed at comfortable (POWERUPS #15).Laravel · navyDTC · midnight green

Anatomy

The component as it sits in the product: English, compact, real data shapes.

Step 3 of 6 · Preview

Phone shows the compact step title; imports themselves stay on desktop.

States

6 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

step 1

Step 3 of 6 · Preview

Phone shows the compact step title; imports themselves stay on desktop.

step 3 current

Step 3 of 6 · Preview

Phone shows the compact step title; imports themselves stay on desktop.

step 3 error

Step 3 of 6 · Preview

Phone shows the compact step title; imports themselves stay on desktop.

later steps locked

Step 3 of 6 · Preview

Phone shows the compact step title; imports themselves stay on desktop.

all done

Step 3 of 6 · Preview

Phone shows the compact step title; imports themselves stay on desktop.

section nav (long form)

BasicsNames (EN / CN)2ProductionLinks and blockersValidation

Long-form mode: scroll-spy, error count per section, ⌥↓ jumps to the first error.

Density

The phone shell is always comfortable (POWERUPS #15): 44px tap targets, 16px inputs. Compact exists on desktop only; see the desktop page.

comfortable · phone default

Step 3 of 6 · Preview

Phone shows the compact step title; imports themselves stay on desktop.

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

Step 3 of 6 · Preview

Phone shows the compact step title; imports themselves stay on desktop.

中文 · lang=zh-Hans

第 3/6 步 · 预览

手机显示紧凑步骤标题；导入本身在桌面完成。

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string

Step 3 of 6 · Preview

Phone shows the compact step title; imports themselves stay on desktop.

permission denied

Step 3 of 6 · Preview

Phone shows the compact step title; imports themselves stay on desktop.

Contract

The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.

Export: Stepper · @rj/admin-kit
Props: steps · current · errorAt · locked
States: done · current · error · locked
shadcn / Radix: none
Accessibility: ol with aria-current=step
Phone variant: compact “Step 3 of 6” title + bar

Export: SectionNav · @rj/admin-kit
Props: sections {id, label, errors} · active
States: active · done · errors
Package underneath: IntersectionObserver (scroll-spy)
Accessibility: nav of in-page links; ⌥↓ jumps to the first error