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

Stepper

Component status
Contribution
Current version@spectrum-css/stepper@6.2.0
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/stepper@7.0.0-s2-foundations.15
ReleasedSeptember 17, 2024
View repository
GitHub
View package
npm

Variants

Standard
Contribution

S

M

L

XL

Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
    <div class="spectrum-Stepper spectrum-Stepper--sizeS">
      <div class="spectrum-Textfield spectrum-Textfield--sizeS 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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeS spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
          <div class="spectrum-InfieldButton-fill">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp50 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Chevron50" />
              </svg>
          </div>
        </button>
        <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeS spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
          <div class="spectrum-InfieldButton-fill">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown50 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron50" />
            </svg>
          </div>
        </button>
      </span>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>
    <div class="spectrum-Stepper spectrum-Stepper--sizeM">
      <div class="spectrum-Textfield spectrum-Textfield--sizeM spectrum-Stepper-textfield">
        <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
      </div>
      <div class="spectrum-Stepper-buttons">
        <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
          <div class="spectrum-InfieldButton-fill">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Chevron75" />
              </svg>
          </div>
        </button>
        <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
          <div class="spectrum-InfieldButton-fill">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron75" />
            </svg>
          </div>
        </button>
      </div>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
    <div class="spectrum-Stepper spectrum-Stepper--sizeL">
      <div class="spectrum-Textfield spectrum-Textfield--sizeL 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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeL spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
          <div class="spectrum-InfieldButton-fill">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp100 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Chevron100" />
              </svg>
          </div>
        </button>
        <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeL spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
          <div class="spectrum-InfieldButton-fill">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron100" />
            </svg>
          </div>
        </button>
      </span>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
    <div class="spectrum-Stepper spectrum-Stepper--sizeXL">
      <div class="spectrum-Textfield spectrum-Textfield--sizeXL 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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeXL spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
          <div class="spectrum-InfieldButton-fill">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp200 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Chevron200" />
              </svg>
          </div>
        </button>
        <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeXL spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
          <div class="spectrum-InfieldButton-fill">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown200 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron200" />
            </svg>
          </div>
        </button>
      </span>
    </div>
  </div>
</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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron75" />
          </svg>
      </div>
    </button>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron75" />
        </svg>
      </div>
    </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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron75" />
          </svg>
      </div>
    </button>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron75" />
        </svg>
      </div>
    </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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron75" />
          </svg>
      </div>
    </button>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron75" />
        </svg>
      </div>
    </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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron75" />
          </svg>
      </div>
    </button>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron75" />
        </svg>
      </div>
    </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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron75" />
          </svg>
      </div>
    </button>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron75" />
        </svg>
      </div>
    </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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" disabled tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron75" />
          </svg>
      </div>
    </button>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" disabled tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron75" />
        </svg>
      </div>
    </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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron75" />
          </svg>
      </div>
    </button>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron75" />
        </svg>
      </div>
    </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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron75" />
          </svg>
      </div>
    </button>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron75" />
        </svg>
      </div>
    </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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron75" />
          </svg>
      </div>
    </button>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron75" />
        </svg>
      </div>
    </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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron75" />
          </svg>
      </div>
    </button>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron75" />
        </svg>
      </div>
    </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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron75" />
          </svg>
      </div>
    </button>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron75" />
        </svg>
      </div>
    </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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron75" />
          </svg>
      </div>
    </button>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron75" />
        </svg>
      </div>
    </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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" disabled tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron75" />
          </svg>
      </div>
    </button>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" disabled tabindex="-1">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron75" />
        </svg>
      </div>
    </button>
  </span>
</div>

Migration Guide

New Textfield markup

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

Use InFieldButton instead of FieldButton

Stepper now uses InFieldButtons 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.

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.