CSC Design System Skills & Best Practices
Ctrl K
CS
On this page

Proposed CSC Standards · 0.1.0

Step indicators

Progress through a known sequence.

Show which step is current in a multi-step process.

Live componentResponsive playground

What this describes

  1. 1Details
  2. 2Requirements
  3. 3Review
  4. 4Submit
Default
  1. 1Details
  2. 2Requirements
  3. 3Review
  4. 4Submit
Horizontal
  1. 1Details
  2. 2Requirements
  3. 3Review
  4. 4Submit
Vertical
  1. 1Details
  2. 2Requirements
  3. 3Review
  4. 4Submit
Compact

When to use

  • A form or workflow with ordered steps.
  • The person benefits from seeing earlier and later steps.

When not to use

  • Unordered filters. Use Tabs.
  • A single form page.

Allowed variants

Horizontal

A short sequence on a wide page.

Hierarchy
Left to right.
Use in
Desktop wizards.
Restriction
Labels stay visible.
Accessibility
Current step is text.
Responsive
Switch to vertical before overflow.

Vertical

Narrow screens and long labels.

Hierarchy
Stacked.
Use in
Under 760px.
Restriction
Still show every label.
Accessibility
Same current state.
Responsive
This is the narrow layout.

Compact

A tight header.

Hierarchy
Shorter.
Use in
When the form title needs the width.
Restriction
Do not drop the current label.
Accessibility
Current step remains text.
Responsive
Use only if it fits at 320px.

Mandatory rules

STP-001RequiredWCAG

Name the current step in text

The current step has a visible label and a programmatic current state.

Implementation detail

A numbered circle without a label is not enough. WCAG 1.4.1 also applies if color marks the current step.

Show the step label in text and mark the current step in the accessibility tree.

Check: The current step can be identified without color.

Source

STP-002RecommendedProposed CSC convention

Use the vertical variant when the horizontal trail would overflow

Horizontal is for wide screens. Vertical and compact are for narrow ones.

Implementation detail

Proposed CSC Standard. Four horizontal labels overflow at 320px.

Stack the steps vertically under 760px.

Check: At 375px the steps stack and the page does not scroll sideways.

STP-003ConditionalWCAG

Do not skip a step that still has errors

Forward navigation is blocked while the current step is invalid, and the errors are listed.

Implementation detail

WCAG 3.3.1. Letting the person skip ahead hides the error.

Validate the current step before changing current.

Applies when: The stepper is part of ApplicationWizard or another validated flow.

Check: An empty required field on step 1 prevents moving to step 2 and shows text.

Source

Restrictions

  • STP-003 Do not skip a step that still has errors. The stepper is part of ApplicationWizard or another validated flow.

Accessibility

  • Current step is text.
  • Errors block progress and are written out.

Responsive behavior

  • Vertical under 760px.
  • Do not horizontally scroll the step trail.

Component states

Complete

Earlier steps are marked done with text or an icon plus text.

  1. 1Details
  2. 2Requirements
  3. 3Review
  4. 4Submit

Current

One step is current.

  1. 1Details
  2. 2Requirements
  3. 3Review
  4. 4Submit

Upcoming

Later steps are visible but not described as done.

  1. 1Details
  2. 2Requirements
  3. 3Review
  4. 4Submit

Correct implementation

Vertical stepsCorrect implementation · TSX

The current step is named in text. The circle uses #2A338F.

Imports: None. Dependencies: None. Rules: STP-001, STP-002.

export function ApplicationSteps() {
  return (
    <ol>
      <li>Details</li>
      <li aria-current="step"><span style={{ background: '#2A338F', color: '#fff', borderRadius: '50%', display: 'inline-grid', width: 26, height: 26, placeItems: 'center' }}>2</span> Review</li>
    </ol>
  );
}

Incorrect implementation

No incorrect example is published for this component.

Common mistakes

  • Number-only steps.
  • A horizontal trail that overflows.
  • Allowing Next while the step is invalid.

Testing checklist

Agent prompts for this component are in the AI Development Hub.