Figma Links: Web / Annotation

Overview

A stepper component is a control component that is usually paired with content. It allows users to navigate a collection of content in a fixed space.

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, using the 8px grid, be spaced as appropriate.

Usage

[Add image of max stepper and a placeholder, should look like a mock carousel]

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

Steppers can have two behaviours that can be set on the props of each component.

First to Last

[Image of stepper + placeholder with first or last button disabled, use a cursor to show action]

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

Infinite Loop [Image of stepper + Placeholder with last button active, use a cursor to show action]