API Reference
useStepper()

API Overview for useStepper()

Headless Stepper uses React hook under the hood, and externaly for lifecycle management.

useStepper(StepperProps): UseStepper

StepperProps


ParameterTypeDescriptionRequiredDefault
stepsSteps[]Steps that compound the stepper.trueundefined
currentStepnumberCurrent step of the stepper.false0
orientationStepperOrientationStepper orientation (used only for the ARIA-ORIENTATION).falsehorizontal

UseStepper


ParameterTypeDescriptionRequiredDefault
stepperPropsReact.HTMLAttributes<HTMLElement>Props to use into any React element to represent the stepper.--
stepsPropsReact.HTMLAttributes<HTMLElement>[]Props to use into any React Element to represent the steps.--
progressPropsReact.HTMLAttributes<HTMLElement>props to use into a HTMLElement to represents a progress bar.--
stateStepperStatethe stepper state with current step, disabled steps and other props.--
nextStep()() => voidTrigger the next step.--
prevStep()() => voidTrigger the previous step.--
setStep()(step: number) => voidGo to a step directly.--

Misc types

Other types exported by this package are:

Steps


ParameterTypeDescriptionRequiredDefault
labelstringLabel to display. Ex.: Step 04true-
disabledbooleanEnable/disable step.--
isValidbooleanCheck if a step is valid.--

StepperState


ParameterTypeDescriptionRequiredDefault
currentStepnumberThe current step selected--
progressIdstringUnique ID to the progress bar.--
labelIdstringThese ID you can use with a span element to represent the progress bar label.--
hasPreviousStepbooleanCheck if has previuos step.--
hasNextStepbooleanCheck if has next step.--
totalStepsnumberReturns the total steps..--

StepperOrientation

This type represents the orientation of the stepper and is only used to tell to the ARIA-ORIENTATION value.

Can be horizontal or vertical.