EEnterUI
DocsComponentsThemesDonation
Get Started
      • WizardSteps
      • StepperForm
      • ReleaseStepper
EnterUIDocsNavigation OverlaysNavigationStep NavigationWizardSteps
Navigation OverlaysUpdated 6 May 2026

WizardSteps

Step progress for setup, onboarding, and multi-step flows.

WizardSteps communicates sequence and current progress without turning the flow into a large navigation system.

#Default usage

Wizard steps

Current steps are exposed through aria-current.

  1. Install
  2. Configure
  3. Ship
Code
<WizardSteps>
  <WizardStep status="complete">Install</WizardStep>
  <WizardStep status="current">Configure</WizardStep>
  <WizardStep>Ship</WizardStep>
</WizardSteps>

#Import

Code
import { WizardStep, WizardSteps, StepperProgress } from "@froggdesign/enter-ui-react";

#Variants

Vertical steps

Use vertical steps when labels are longer or the layout is narrow.

  1. Create project
  2. Invite team
  3. Review settings

#Accessibility

WizardSteps renders an ordered list. The current step receives aria-current="step"; avoid making completed state depend on color alone.

#API

  • orientation: horizontal or vertical.
  • WizardStep status: complete, current, or upcoming.
  • StepperProgress and StepperProgressStep are aliases.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

PreviousTreeView
NextStepperForm

On this page

  1. Default usage
  2. Import
  3. Variants
  4. Accessibility
  5. API
  6. Styling