Variant 01
Form progress
The same steps at the start, in the middle and at the end.
View content
Step 1
Step 2
Step 3
Components / molecules
Form progress and actions
Two parts that guide someone through a multi-step form: where they are, and the buttons that move them on.
Usage
When to use it
Show FormProgress above a form with more than one step, and put FormActions at the bottom of every step. They are used together in the multi-step form organism.
02 / examples
See the component in context.
Variant 02
Form actions
The buttons change with the position of the step.
View content
First step
Middle step
Last step
03 / contract
Rules the component follows
Form progress shows numbered steps with a status under each one, and it also states the position in words, for example step two of four. Form actions are the buttons at the bottom of a step: the first step offers cancel and next, the middle steps back and next, and the last step back and a button that submits the form.
The primary action is always on the right and stays in the same place on every step. Arrows show the direction of movement and a cancel icon marks cancel, so the buttons can be understood at a glance.
04 / accessibility
Accessibility information
The position is always given as text as well, so it does not depend on colour or on the circles. The current step is marked for assistive technology, and every step has a status in words such as in progress or not started.
The submit button says what will happen, for example send application, instead of a generic word. All of the buttons meet the 44px minimum target and can be reached and used with a keyboard.