Stepper

Key Points

• Steppers can control between two and five items
• Steppers can either step between the first and last item or go through a continuous carousel
• Steppers have no outer padding and therefore should be spaced as appropriate

Usage

Steppers will always be a child component of a larger composition which is trying to display content in a fixed area.

Steppers should always be placed at the bottom of the composition and given enough space to allow a clear hit area of the controls.

Navigation

Users should be able to navigate to the each item using the stepper controls.

• Using a cursor they can click on each button or a specific indicator.
• Using keyboard controls they can navigate to a button or to each indicator.

Behaviour

There are two different ways to display content using stepper/carousel:

1. First to Last

If a user is required to stop at the first or last item in a collection then the corresponding icon button should be disabled.

2. Continous Loop

Components that have not end point always display the start and end buttons as active.

File Links