Steps
Contents
What are Steps?
A Steps component is used to display progress through a series of logical steps.
When, and why?
You would use a Steps component when you need to show a number of steps that must be completed in sequential order. Steps are typically used with form inputs and buttons for navigating between each step - this pattern is known as a Wizard.
Step types
The following Step types are available:
| Type | Description |
|---|---|
| As vertical | A series of Steps displayed vertically |
| As horizontal | A series of Steps displayed horizontally. This type has a start, middle and end design, with an arrow to indicate the direction of travel. |
Step properties
The following Step properties are available:
| Property | Description |
|---|---|
| State | Sets the state of each step; Default, Hover, Active, Selected, and Disabled |
| Position | Sets the step as Start, Middle, or End for horizontal steps |
| Size | Sets the size of the Steps component; S or M (default) |
| Complete | Shows a completed icon to indicate when a step has been completed successfully |
Using Steps
A Steps component can be used to breakdown a process into manageable steps. Steps are numbered to indicate the order in which they must be completed. Each step becomes available when the current step is completed and steps can also be returned to later for editing.
Navigating between steps is handled by Previous and Next buttons that are positioned beneath each step's content, in the Wizard footer.
For additional examples and API documentation, see Storybook
Live demo
Below, you can find a live demo for a Steps component. Use the drop-down menus and radio buttons to view the different Step Types and Variants.
Select variant
Component accessibility
This component has been built to meet the current WCAG AA 2.1 guidelines. We also test these components against the guidelines before release.
Aria tags
Every component in Mosaic requires an appropriate Aria tag to ensure that screen readers can effectively parse the page. Aria tags are provided as part of Mosaic. Please do not override these without good reason.
Ensure that Aria tags are used as appropriate signposts throughout the product.
Colour Combinations
When designing with a Timeline, you should be mindful of the colour combinations you are using. The components have been designed with this in mind, but if you are using colours that are not part of the default component, please ensure that there is a clear colour contrast within the parts of the component and between the Timeline and the background it is on. To check the contrast, please use WebAIM's contrast checker.
Focus state
A Timeline needs to have a focus state - a focus state is when you tab into an element to interact with it. Ensure that users can use their keyboard to focus on the Timeline for each element of the Timeline elements.
Icons
An icon needs to have underlying code that describes what action the icon takes. the labels should be specific - for example, a 'bin' icon for delete should be labelled 'delete' not 'bin'.
Key Binding
A Timeline needs to be able to be interacted with via a keyboard. Where possible we will provide key-binds within our Mosaic component or there will be default HTML ones. If this isn't the case then please implement logical key-binds for all intractable components.
| Design | Documentation | HTML/CSS | Web Component |
|---|---|---|---|