• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Stepper

Component status
Contribution
Last releasedOctober 20, 2020
Current version@spectrum-css/stepper@3.0.0-beta.6

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" placeholder="100" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-FieldButton spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-FieldButton spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </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" placeholder="100" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-FieldButton spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-FieldButton spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </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" placeholder="100" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-FieldButton spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-FieldButton spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </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" placeholder="100" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-FieldButton spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-FieldButton spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </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" placeholder="100" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-FieldButton spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-FieldButton spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </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" placeholder="100" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-FieldButton spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-FieldButton spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </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" placeholder="100" min="-2" max="2" step="0.5" disabled>
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-FieldButton spectrum-Stepper-stepUp" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-FieldButton spectrum-Stepper-stepDown" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </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" placeholder="100" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </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" placeholder="100" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </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" placeholder="100" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </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" placeholder="100" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </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" placeholder="100" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </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" placeholder="100" min="-2" max="2" step="0.5">
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </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" placeholder="100" min="-2" max="2" step="0.5" disabled>
  </div>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Stepper-stepUp" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Stepper-stepDown" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </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 FieldButton instead of ActionButton

Stepper now uses FieldButtons instead of ActionButtons 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.