Step progress
The head of a multi-step flow — a sign-up, a profile to fill: back, segments that fill, the position in words.
Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.
When to use
- The onboarding of a dating app: name, birth date, photos, interests, location.
- A checkout in several steps.
When not to use
- For the steps of a running process.Use instead: Stepper
- For a first launch's promises.Use instead: Onboarding
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { StepProgress } from "@krizaka/ui/step-progress";Examples
Sign-up
Step 2 of 5, back and skip.
Props
The head of a sign-up or a profile to fill: back, segments that fill, the position in words.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | (step: number, total: number) => string | — | The position in words: (n, total) => "Step " + n + " of " + total — passed translated. |
steprequired | number | — | The current step, from 1. |
totalrequired | number | — | How many steps. |
back | ReactNode | — | The back link or button (a Button), at the left. |
className | string | — | Classes merged on the root. |
trailing | ReactNode | — | At the right: a Skip link. |
Accessibility
- A
progressbarnamed and valued by the position in words.
Best practices
- Five steps or fewer; let people skip what is optional.
- Keep the position in words (
label).
Related components
Generated from the code of @krizaka/ui 3.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Segmented
A segmented control that switches between views of a screen — the native counterpart of the web's segmented tabs.
Stepper
The steps of a journey or a job: done steps checked, the current one traced by the Krizaka glyph (growing to its value), failures crossed, connectors that fill — and every state said in words.