Skip to primary navigation Skip to main content
US flag signifying that this is a United States Federal Government website An official website of the United States Government USDA United State Department of Agriculture Farm Production and Conservation
FPAC Design System fsa-style@2.7.3
Get Started

Stepped Control

May Require JavaScript

Overview

Navigate through a multi-step process with directional actions.

Preview

View Kitchen Sink
Optional status message

Variants and Examples

Default

<div class="fsa-stepped-control">
  <div class="fsa-stepped-control__bd">
    <div class="fsa-stepped-control__list">
      <div class="fsa-stepped-control__shim"></div>
      <div class="fsa-stepped-control__item">
        <button class="fsa-btn fsa-btn--alt fsa-btn--large fsa-stepped-control__btn" type="button">
          <span class="fsa-stepped-control__btn-label">[ secondary ]</span>
        </button>
      </div>
      <div class="fsa-stepped-control__item">
        <button class="fsa-btn fsa-btn--primary fsa-btn--large fsa-stepped-control__btn" type="submit">
          <span class="fsa-stepped-control__btn-label">[ primary ]</span>
        </button>
      </div>
    </div>
  </div>
</div>

Default, with Status Message

5 of 10 Commodities are complete 
<div class="fsa-stepped-control">
  <div class="fsa-stepped-control__bd">
    <div class="fsa-stepped-control__message" role="status">
      <strong>5</strong> of <strong>10</strong> Commodities are complete
    </div>
    <div class="fsa-stepped-control__list">
      <div class="fsa-stepped-control__shim"></div>
      <div class="fsa-stepped-control__item fsa-stepped-control__item--push">
        <button class="fsa-btn fsa-btn--alt fsa-btn--large fsa-stepped-control__btn" type="button">
          <span class="fsa-stepped-control__btn-label">[ secondary ]</span>
        </button>
      </div>
      <div class="fsa-stepped-control__item">
        <button class="fsa-btn fsa-btn--primary fsa-btn--large fsa-stepped-control__btn" type="submit">
          <span class="fsa-stepped-control__btn-label">[ primary ]</span>
        </button>
      </div>
    </div>
  </div>
</div>

Default, with multiple secondary

<div class="fsa-stepped-control">
  <div class="fsa-stepped-control__bd">
    <div class="fsa-stepped-control__list">
      <div class="fsa-stepped-control__shim"></div>
      <div class="fsa-stepped-control__item fsa-stepped-control__item--push">
        <button class="fsa-btn fsa-btn--alt fsa-btn--large fsa-stepped-control__btn" type="button">
          <span class="fsa-stepped-control__btn-label">[ secondary_1 ]</span>
        </button>
      </div>
      <div class="fsa-stepped-control__item">
        <button class="fsa-btn fsa-btn--alt fsa-btn--large fsa-stepped-control__btn" type="button">
          <span class="fsa-stepped-control__btn-label">[ secondary_2 ]</span>
        </button>
      </div>
      <div class="fsa-stepped-control__item">
        <button class="fsa-btn fsa-btn--primary fsa-btn--large fsa-stepped-control__btn" type="submit">
          <span class="fsa-stepped-control__btn-label">[ primary ]</span>
        </button>
      </div>
    </div>
  </div>
</div>

Directional

<div class="fsa-stepped-control">
  <div class="fsa-stepped-control__bd">
    <div class="fsa-stepped-control__list">
      <div class="fsa-stepped-control__item fsa-stepped-control__item--pull">
        <button class="fsa-btn fsa-btn--alt fsa-btn--large fsa-stepped-control__btn" type="button">
          <span class="fsa-stepped-control__btn-label">[ regressive ]</span>
        </button>
      </div>
      <div class="fsa-stepped-control__shim"></div>
      <div class="fsa-stepped-control__item fsa-stepped-control__item--push">
        <button class="fsa-btn fsa-btn--primary fsa-btn--large fsa-stepped-control__btn" type="submit">
          <span class="fsa-stepped-control__btn-label">[ progressive ]</span>
        </button>
      </div>
    </div>
  </div>
</div>

Directional, with multiple actions

<div class="fsa-stepped-control">
  <div class="fsa-stepped-control__bd">
    <div class="fsa-stepped-control__list">
      <div class="fsa-stepped-control__item fsa-stepped-control__item--pull">
        <button class="fsa-btn fsa-btn--alt fsa-btn--large fsa-stepped-control__btn" type="button">
          <span class="fsa-stepped-control__btn-label">[ regressive ]</span>
        </button>
      </div>
      <div class="fsa-stepped-control__shim"></div>
      <div class="fsa-stepped-control__item fsa-stepped-control__item--push">
        <button class="fsa-btn fsa-btn--alt fsa-btn--large fsa-stepped-control__btn" type="button">
          <span class="fsa-stepped-control__btn-label">[ prog_secondary ]</span>
        </button>
      </div>
      <div class="fsa-stepped-control__item">
        <button class="fsa-btn fsa-btn--primary fsa-btn--large fsa-stepped-control__btn" type="submit">
          <span class="fsa-stepped-control__btn-label">[ progressive ]</span>
        </button>
      </div>
    </div>
  </div>
</div>

Directional, with Status Message

5 of 10 Commodities are complete 
<div class="fsa-stepped-control">
  <div class="fsa-stepped-control__bd">
    <div class="fsa-stepped-control__message fsa-stepped-control__message--fill" role="status">
      <strong>5</strong> of <strong>10</strong> Commodities are complete
    </div>
    <div class="fsa-stepped-control__list">
      <div class="fsa-stepped-control__item fsa-stepped-control__item--pull">
        <button class="fsa-btn fsa-btn--alt fsa-btn--large fsa-stepped-control__btn" type="button">
          <span class="fsa-stepped-control__btn-label">[ regressive ]</span>
        </button>
      </div>
      <div class="fsa-stepped-control__shim"></div>
      <div class="fsa-stepped-control__item fsa-stepped-control__item--push">
        <button class="fsa-btn fsa-btn--primary fsa-btn--large fsa-stepped-control__btn" type="submit">
          <span class="fsa-stepped-control__btn-label">[ progressive ]</span>
        </button>
      </div>
    </div>
  </div>
</div>

Directional, with Status Message and multiple actions

5 of 10 Commodities are complete 
<div class="fsa-stepped-control">
  <div class="fsa-stepped-control__bd">
    <div class="fsa-stepped-control__message fsa-stepped-control__message--fill" role="status">
      <strong>5</strong> of <strong>10</strong> Commodities are complete
    </div>
    <div class="fsa-stepped-control__list">
      <div class="fsa-stepped-control__item">
        <button class="fsa-btn fsa-btn--alt fsa-btn--large fsa-stepped-control__btn" type="button">
          <span class="fsa-stepped-control__btn-label">[ regressive_1 ]</span>
        </button>
      </div>
      <div class="fsa-stepped-control__item fsa-stepped-control__item--pull">
        <button class="fsa-btn fsa-btn--alt fsa-btn--large fsa-stepped-control__btn" type="button">
          <span class="fsa-stepped-control__btn-label">[ regressive_2 ]</span>
        </button>
      </div>
      <div class="fsa-stepped-control__shim"></div>
      <div class="fsa-stepped-control__item fsa-stepped-control__item--push">
        <button class="fsa-btn fsa-btn--primary fsa-btn--large fsa-stepped-control__btn" type="submit">
          <span class="fsa-stepped-control__btn-label">[ progressive ]</span>
        </button>
      </div>
    </div>
  </div>
</div>

Sticky + Default

This <div class="DEMO-STICKY-STEPPED-CONTROL"> container provides the boundary by which the fsa-stepped-control--sticky variant determines when to stick.

Consectetur sit dolorum iste doloribus laudantium eaque itaque unde ipsa. Tempora non accusamus nihil aut, perferendis nesciunt earum dolor laborum necessitatibus reprehenderit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio dolores, unde aperiam, nemo harum sed repellendus veniam voluptas cupiditate porro facilis voluptates ipsam, sapiente illum odit possimus debitis est. Necessitatibus.

Ducimus architecto ipsa iusto aliquid deserunt commodi dolore, magnam cumque dolorum modi placeat nulla ea veniam suscipit, dolorem voluptas consequuntur repellendus non.

<div>
  <p>...</p>
  <div class="fsa-stepped-control fsa-stepped-control--sticky">
    ...
  </div>
  <p>...</p>
</div>

Sticky + Default, with Status Message

This <div class="DEMO-STICKY-STEPPED-CONTROL"> container provides the boundary by which the fsa-stepped-control--sticky variant determines when to stick.

Consectetur sit dolorum iste doloribus laudantium eaque itaque unde ipsa. Tempora non accusamus nihil aut, perferendis nesciunt earum dolor laborum necessitatibus reprehenderit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio dolores, unde aperiam, nemo harum sed repellendus veniam voluptas cupiditate porro facilis voluptates ipsam, sapiente illum odit possimus debitis est. Necessitatibus.

Ducimus architecto ipsa iusto aliquid deserunt commodi dolore, magnam cumque dolorum modi placeat nulla ea veniam suscipit, dolorem voluptas consequuntur repellendus non.

5 of 10 Commodities are complete

Sticky + Directional

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio dolores, unde aperiam, nemo harum sed repellendus veniam voluptas cupiditate porro facilis voluptates ipsam, sapiente illum odit possimus debitis est. Necessitatibus.

Ducimus architecto ipsa iusto aliquid deserunt commodi dolore, magnam cumque dolorum modi placeat nulla ea veniam suscipit, dolorem voluptas consequuntur repellendus non.

Reprehenderit inv omnis saepe quam assumenda iste eum cum magnamentore eos explicabo fugiat excepturi dolorum, natus deleniti? Hic magni facilis.

Quia quos cupiditate quae sed earum doloribus voluptatum praesentium! Quae sapiente ea quia veniam, cumque, beatae animi commodi, molestias, temporibus rerum harum.

Sticky + Directional, with Status Message

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio dolores, unde aperiam, nemo harum sed repellendus veniam voluptas cupiditate porro facilis voluptates ipsam, sapiente illum odit possimus debitis est. Necessitatibus.

Ducimus architecto ipsa iusto aliquid deserunt commodi dolore, magnam cumque dolorum modi placeat nulla ea veniam suscipit, dolorem voluptas consequuntur repellendus non.

5 of 10 Commodities are complete

Within Modal

Examples:

Responsive

At narrower breakpoints the Stepped Control is docked to the bottom of the viewport.

View on a larger screen or device to fully appreciate Responsive Web Design rendering.

Usage

Use

  • For process flows requiring multiple steps to perform actions
  • While paired with the Stepped Tabs component
  • When a process flow would be enriched by a sticky control at the bottom of the screen
  • When a Status Message would help to gain context for the User during a stepped process

Don’t Use

  • As the component to control a singular form or action
  • At the top of a screen as a means for navigation
  • As a substitute for pagination
UI Component
Buttons
Signal key actions on a page, form, or dialog.
UX Pattern
Stepped Process
Lead the user through a series of steps or flow.
UI Component
Stepped Tabs
Provide guidance, context, and navigation through a stepped process or workflow.

General Guidance

  • The Stepped Control is used as the standard Component to advance from screen to screen within an application
  • In most cases, the Stepped Control with sticky variant should be used, as it keeps the navigation controls on the screen for the User
  • Variants of the Stepped Control should be used to enhance the User Experience by providing additional context that might be missing for the User.

JavaScript Guidance

Disclaimer

All JavaScript included in the Design System's CSS Framework, fsa-style, are not approved for Production use. Their role is purely for demonstration purposes only, providing development teams with the inspiration, reference, and guidance to fully implement a component's UI behavior.

Script demonstrations are primarily UI-oriented, typically manipulating the HTML in basic ways (i.e. DOM Scripting). Two frequent examples:

  • Adding and/or removing a class, e.g. addClass('component-name--active')
  • Adding and/or removing an attribute, e.g. setAttribute('aria-expanded', 'false')

Summary

The JavaScript for the Sticky Stepped Control performs a number of calculations based on the position of the component in relation to the top of the screen. JavaScript is not required for the non-sticky variants of the Stepped Control component. The Component Update Events list below should trigger the change of the Sticky variant of the component.

Component Update

  • Calculate Component position, relative to bottom of screen
  • Apply fsa-stepped-control--unstuck class to pin component

Component Update Events

  • Window scrolling
  • DOMContentLoaded
  • Window resize
  • All Modals scrolling, if using Modal variant
Return to top