Navigation

StepIndicator

A world-class step indicator component for multi-step healthcare workflows. Shows progress through a series of steps with clear visual states and full accessibility.

Patient Registration Flow

Show progress through a multi-step patient registration process with progress summary.

Step 3 of 4

Current step: Medical History

Vertical Layout with Descriptions

Use vertical orientation for complex workflows that benefit from detailed step descriptions.

Claim Submission Workflow

A 5-step claim submission process demonstrating how the indicator scales with more steps.

Step 3 of 5 • 40% complete

Interactive Steps

Allow users to navigate between completed steps by clicking on them.

Step 1 of 3

Current step: Patient Details

Click on completed steps to navigate back

Error State

Show error state when a step fails validation or encounters an issue.

Insurance Verification Failed: Unable to verify coverage. Please check the policy number and try again.

Sizes

Choose the appropriate size based on available space and visual hierarchy.

Small - Dense interfaces

Medium (default) - Standard use

Large - Hero workflows

Compact Variant

Use compact variant when labels need to appear inline with indicators.

Minimal Variant (Icons Only)

Use minimal variant for very tight spaces where only indicators are needed.

Step 3 of 4: Medical History

Optional Steps

Mark steps as optional to indicate they can be skipped.

Note: "Consent Forms" is marked as optional

Props

Prop	Type	Default	Description
`steps`	`Step[]`	—	Array of steps (required)
`size`	`'sm' \| 'md' \| 'lg'`	'md'	Size variant
`variant`	`'default' \| 'compact' \| 'minimal'`	'default'	Display variant
`orientation`	`'horizontal' \| 'vertical'`	'horizontal'	Layout orientation
`showLabels`	`boolean`	true	Whether to show labels
`showDescriptions`	`boolean`	false	Whether to show step descriptions
`showProgress`	`boolean`	false	Show progress summary (Step X of Y)
`progressFormat`	`(current, total) => string`	—	Custom progress format function
`allowFutureSteps`	`boolean`	false	Allow clicking on future steps
`ariaLabel`	`string`	'Progress'	Accessible label for navigation
`onStepClick`	`(step: Step, index: number) => void`	—	Step click handler

Healthcare Best Practices

Clear Step Names: Use concise, action-oriented labels (e.g., "Verify Coverage" not "Coverage Verification Step").
Progress Visibility: Enable showProgress for workflows with more than 3 steps.
Descriptions for Complex Steps: Use showDescriptions with vertical orientation for detailed workflows.
Error Recovery: When showing error states, provide clear instructions on how to resolve the issue.
Navigation: Always allow users to click back to completed steps for review or editing.
Optional Steps: Mark non-required steps as optional: true to reduce perceived complexity.

Accessibility Notes

Semantic HTML: Uses <nav> with <ol> for proper document structure.
Current Step: Active step is marked with aria-current="step".
Descriptions: Step descriptions are associated via aria-describedby.
Progress Announcement: Progress summary uses aria-live="polite" for updates.
Keyboard Navigation: All clickable steps are focusable with visible focus rings.
Reduced Motion: Animations respect prefers-reduced-motion preference.