Stepper UI component for Figma — 196 variants

Component Overview

Use stepper patterns to organize onboarding, checkout and other multi-step tasks. Keep the relevant state and next action clear so the component is easy to scan. Align labels and visual priority with the screen around it.

Guiding Users through Sequential Steps

Name each step, distinguish completed and upcoming stages, and make the current step's required action easy to find. Keep labels concise and use spacing or icon cues to reinforce the message without relying on color alone.

Enhancing Navigation and Interaction

In Figma, compare the component variants in a real product screen. Check spacing, contrast and labels across relevant states, then adapt the pattern to the team's design system. Document the selected variant and relevant states so the pattern stays consistent across screens.

Customization and Adaptability

Modern Stepper components offer customization options such as step labels, icons, animations, and progress indicators. This allows designers to tailor the appearance and behavior of the Stepper to match the overall visual identity and usability requirements of their application.

Types and Variants

Common variants include:
- Horizontal (Linear): sequential steps with connectors; Next/Back primary pattern.
- Horizontal (Non-linear): jump navigation across visited/valid steps.
- Vertical: stacked labels and content; ideal for forms and long copy.
- Compact/Dense: reduced paddings for tight UIs.
- With Numbers / With Icons: numeric counters or semantic icons per step.
- Alternative Label Placement: label below, side, or tooltip-only for narrow layouts.
- Status Variants: current, complete (check), error (badge), optional (subtext). Tokens drive consistency: stepper.step.size, stepper.icon, stepper.connector, stepper.state.current, stepper.state.complete, stepper.state.error, stepper.label.

Sizes, Spacing, and Scale

Provide SM/MD/LG scales:
- Indicators: 20–24–28px with 2px connector thickness by default.
- Label spacing: 6–8–10px from the indicator; connector gaps 12–16–20px.
- Touch targets: ≥44×44px on clickable steps and controls.
- Responsive: collapse labels to tooltips or switch to vertical below critical width. Truncate long labels with ellipsis and provide full text via title or tooltip. Consistent baselines between indicators, labels, and helper texts keep the visual rhythm intact across breakpoints and themes.

States and Behavior

Core states: incomplete, current, complete, error, disabled, and optional. Linear steppers gate progression with validation; non-linear steppers allow jumping to visited/valid steps. Keep transitions subtle; persist completion marks only after server-acknowledged success when applicable. On async operations, show inline feedback and disable navigation until completion. Support keyboard: Arrow keys to move, Home/End to jump, Enter/Space to activate. Maintain scroll-into-view for the current step’s content on small screens.

Accessibility

Expose progress semantics with aria-current="step" on the active trigger, and link triggers to content via aria-controls/aria-labelledby. Use role="tabpanel" for step content and toggle hidden or aria-hidden appropriately. Provide clear error summaries per step, not just inline color. Honor reduced motion and keep focus management deterministic: move focus to the step heading/content on step change. Ensure sufficient contrast for connectors, indicators, and labels across themes.

Figma & Tailwind Integration

Figma ships variants for orientation (horizontal/vertical), density (compact/comfortable), indicator type (number/icon), and state (current/complete/error/disabled). Auto Layout maintains consistent gaps and connector sizing; component properties toggle labels, helper text, and optional flags. In Tailwind, compose with flex/gap utilities, ring styles for focus-visible, and CSS variables (e.g., --step-connector, --step-current-bg, --step-complete-bg) to sync theming across light/dark modes and premium palettes.

Best Implementation Practices

- Keep flows between 3–7 steps; merge micro-steps into inline sections when possible.
- Use concise, action-oriented labels; add optional/required markers sparingly.
- Gate progression only on essential validations; allow Save & continue later.
- Persist state (local or server) at each step transition; guard against refresh loss.
- Prefer vertical steppers for form-heavy content; horizontal for brief tasks.
- For mobile, auto-scroll to current content and provide a summary/review step before submit.