Stepper
A short ordered sequence you must finish, with the live step marked. It is not a progress bar and not a tab set \u2014 the steps have an order, and you cannot skip one.
Anatomy
- Property
- 2Project
- 3Review
Code
<GdStepper :steps="['Property', 'Project', 'Review']" :current="1" /> An <ol>, because the order is the meaning rather than a layout choice. The live step carries aria-current="step", so a screen-reader user is told where they are in the same breath as the label.
An index, not a count
current is 0-based, which makes the finished state expressible: current === steps.length is "all done", and there is no off-by-one to remember at the last step. A count would make the final state and the last step the same number.
- Reach for it when the sequence must be finished in order \u2014 a lodgement flow. If the sections can be visited in any order, you want tabs.
- Not a progress bar. A progress indicator reports how much of one task is done; a stepper names the tasks.
- Keep it short. Past about five steps the labels stop fitting and the sequence stops being something a reader can hold.
API
Props
stepsrequiredstring[]—The step labels, in order. Rendered as an `<ol>` — the order is the meaning.
currentrequirednumber—0-based index of the live step, which takes `aria-current="step"`. It is an INDEX, not a count: a completed flow is `current === steps.length`.