status states

TuxStepper

Numbered-circle multi-step indicator. Use for funding-application flows, IRB submissions, study onboarding, or any "you are here in a known sequence" pattern. Status (done · active · todo · error) derives from currentIndex; per-step override available.

Container-query aware — horizontal collapses to vertical below ~30rem container width, regardless of viewport.

horizontal

IRB protocol submission · step 3 of 6

<tux-stepper
  :steps="[
    { label: 'Project info',     description: 'Title, sponsor, IRB protocol number' },
    { label: 'Personnel',        description: 'PIs, co-investigators, training' },
    { label: 'Methods',          description: 'Study design, data sources' },
    { label: 'Risks & consent',  description: 'Subject risk profile' },
    { label: 'Documents',        description: 'Protocol PDF, instruments' },
    { label: 'Review & submit',  description: 'Final check, e-signature' },
  ]"
  :current-index="2"
/>

vertical

Stacked layout

<tux-stepper orientation="vertical" :steps="irbSteps" :current-index="2" />

per-step status override

Error step

<tux-stepper
  :steps="[
    { label: 'Sponsor',   description: 'TxDOT · FHWA · NSF · other' },
    { label: 'Budget',    description: 'Direct + indirect costs' },
    { label: 'Approvals', status: 'error', description: 'Department head sign-off failed' },
    { label: 'Submit',    description: 'Send to sponsored research office' },
  ]"
  :current-index="2"
/>

accessibility

Nav landmark + aria-current

The stepper renders as a <nav> with aria-label="Progress" (overrideable). The active step carries aria-current="step"; status icons (check / x) are decorative — labels carry the semantics. Past/future steps can pass to to render as NuxtLink for jump-back navigation.