Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

useStep

Zero-based step state for wizards and multi-page forms.

HooksState@gaudi/design-system/hooks/state/use-stepView in StorybookSource

The current step with next, previous, goTo and reset, clamped to the step count, controlled or uncontrolled. Pairs with Stepper and Progress.

Usage

import { useStep } from '@gaudi/design-system/hooks';
const { step, next, previous, canGoNext, canGoPrevious } = useStep({ count: 4 });

Examples

Wizard with progress

Storybook

API

3 options
3 return values

Accessibility

Move focus to the new step heading after Next or Back, and state the position in text ("Step 2 of 4").

Notes

  • Validate the current step before calling next; the hook does not know your rules.
StepperShow progress through a sequence of labelled steps.6 examplesProgressDeterminate and indeterminate progress with a readable task label.4 examplesuseBooleanGeneric boolean state with stable toggle, enable and disable actions.useControllableStateState that works controlled or uncontrolled, like native inputs.useCountdownA pausable countdown or count-up that stops at its target.useCounterA number with increment, decrement, set and reset actions.