TkxStepper

Horizontal

1

Tell us about yourself

2

Pick your subscription

3

Card or bank

4

Confirm and submit

← BackNext →

import { TkxStepper } from 'tekivex-ui';

const steps = [
  { id: 'profile', label: 'Profile', description: 'Tell us about yourself' },
  { id: 'plan',    label: 'Plan',    description: 'Pick your subscription' },
  { id: 'payment', label: 'Payment', description: 'Card or bank transfer' },
  { id: 'review',  label: 'Review',  description: 'Confirm and submit' },
];

<TkxStepper steps={steps} active={current} onChange={setCurrent} />

Orientation

Vertical with state mix

1

2

3

Card declined

4

<TkxStepper steps={steps} active={1} orientation="horizontal" />  {/* default */}
<TkxStepper steps={steps} active={1} orientation="vertical" />

Horizontal works well for short flows (3–5 steps). Vertical is friendlier for long flows or sidebar layouts.

Step states

const steps = [
  { id: '1', label: 'Profile', state: 'completed' },
  { id: '2', label: 'Plan',    state: 'error' },
  { id: '3', label: 'Payment', state: 'active' },
  { id: '4', label: 'Review',  state: 'pending' },
];

States: completed (✓ filled), error (! red), active (current), pending (default), disabled (greyed out, not clickable).

Non-linear flow

By default, the user can only navigate forward through completed steps. For wizards where the user can jump around freely:

<TkxStepper
  steps={steps}
  active={current}
  onChange={setCurrent}
  linear={false}
/>

Sizes

<TkxStepper steps={steps} size="sm" />
<TkxStepper steps={steps} size="md" />   {/* default */}
<TkxStepper steps={steps} size="lg" />

Accessibility

• Renders as <nav role="navigation" aria-label="Steps">
• Each step is a real <button> (or <span> if disabled)
• Active step has aria-current="step"
• Completed steps announce status via aria-label (e.g. “Step 2: Plan, completed”)
• Error steps announce with role="status" + visible icon
• Keyboard: Tab between steps, Enter / Space to navigate

Props

Prop	Type	Required	Description
steps	Step[]	yes	{ id, label, description?, state? }.
active	number		Index of the active step.
onChange	(index: number) => void		Step change.
orientation	'horizontal' | 'vertical'		Defaults to horizontal.
linear	boolean		Restrict navigation to completed steps. Defaults to true.
size	'sm' | 'md' | 'lg'		Defaults to md.
iconPosition	'top' | 'left'		Layout of step icon vs label.

Source

src/components/TkxStepper.tsx