• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Stepper

Component status
Contribution
Last releasedMay 23, 2023
Current version@spectrum-css/stepper@4.0.33
View repository
GitHub
View package
npm

Variants

Standard
Contribution

Show markup
<div class="spectrum-Stepper">
  <div class="spectrum-Textfield spectrum-Stepper-textfield">
    <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
  </span>
</div>

Focused
Contribution

Show markup
<div class="spectrum-Stepper is-focused">
  <div class="spectrum-Textfield spectrum-Stepper-textfield">
    <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
  </span>
</div>

Keyboard Focused
Contribution

Show markup
<div class="spectrum-Stepper is-keyboardFocused">
  <div class="spectrum-Textfield spectrum-Stepper-textfield">
    <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
  </span>
</div>

Invalid
Contribution

Show markup
<div class="spectrum-Stepper is-invalid">
  <div class="spectrum-Textfield spectrum-Stepper-textfield">
    <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
  </span>
</div>

Invalid (focused)
Contribution

Show markup
<div class="spectrum-Stepper is-invalid is-focused">
  <div class="spectrum-Textfield spectrum-Stepper-textfield">
    <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
  </span>
</div>

Invalid (keyboard focused)
Contribution

Show markup
<div class="spectrum-Stepper is-invalid is-keyboardFocused">
  <div class="spectrum-Textfield spectrum-Stepper-textfield">
    <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
  </span>
</div>

Disabled
Contribution

Show markup
<div class="spectrum-Stepper is-disabled">
  <div class="spectrum-Textfield spectrum-Stepper-textfield is-disabled">
    <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5" disabled>
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepUp" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepDown" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
  </span>
</div>

Quiet
Contribution

Show markup
<div class="spectrum-Stepper spectrum-Stepper--quiet">
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Stepper-textfield">
    <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
  </span>
</div>

Quiet (focused)
Contribution

Show markup
<div class="spectrum-Stepper spectrum-Stepper--quiet is-focused">
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Stepper-textfield">
    <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
  </span>
</div>

Quiet (keyboard focused)
Contribution

Show markup
<div class="spectrum-Stepper spectrum-Stepper--quiet is-keyboardFocused">
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Stepper-textfield">
    <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
  </span>
</div>

Quiet (invalid)
Contribution

Show markup
<div class="spectrum-Stepper spectrum-Stepper--quiet is-invalid">
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Stepper-textfield">
    <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
  </span>
</div>

Quiet (invalid, focused)
Contribution

Show markup
<div class="spectrum-Stepper spectrum-Stepper--quiet is-invalid is-focused">
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Stepper-textfield">
    <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
  </span>
</div>

Quiet (invalid, keyboard focused)
Contribution

Show markup
<div class="spectrum-Stepper spectrum-Stepper--quiet is-invalid is-keyboardFocused">
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Stepper-textfield">
    <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
  </span>
</div>

Quiet (disabled)
Contribution

Show markup
<div class="spectrum-Stepper spectrum-Stepper--quiet is-disabled">
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Stepper-textfield is-disabled">
    <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5" disabled>
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Stepper-stepUp" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Stepper-stepDown" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </button>
  </span>
</div>

Migration Guide

New Textfield markup

Stepper now uses the new Textfield markup. See the Textfield migration guide for more information.

Use ActionButton instead of FieldButton

Stepper now uses ActionButtons instead of FieldButtons for the up/down buttons.

Icon classes removed

.spectrum-Stepper-stepUpIcon and .spectrum-Stepper-stepDownIcon are no longer needed and have been removed.

Width change

Steppers are now much smaller than they were before. You can set a custom size by setting the CSS width property to the .spectrum-Stepper element.

Indicating validity, focus, and disable

Validity and focus must be bubbled up to the parent so descendants siblings can be styled.

Thus, implementations must add the following classes in the following situations:

  • .spectrum-Stepper.is-focused - when the input or button is focused with the mouse
  • .spectrum-Stepper.is-keyboardFocused - when the input or button is focused with the keyboard
  • .spectrum-Stepper.is-valid - when the input has an explicit valid state
  • .spectrum-Stepper.is-invalid - when the input has an explicit invalid state
  • .spectrum-Stepper.is-disabled - when the component is disabled. Note that the Textfield must have .is-disabled, and the <input> and <buttons> must have the [disabled] property.