Code examples

Speciality stepper integer input

This component is useful for small-ish selections. If the max count is more than 20, this component will be cumbersome for people using a mouse.

<div class="stepper">
  <label for="stepper-cowbell">
    How much cowbell?
  <div class="stepper-overlay"
    <!-- Covers the select to ensure uniform styles -->
  <select id="stepper-cowbell"
    <option label="1" selected>1</option>
    <option label="2">2</option>
    <option label="3">3</option>
    <option label="4">4</option>
    <option label="5">5</option>
    <option label="6">6</option>
    <option label="7">7</option>
    <option label="8">8</option>
    <option label="9">9</option>
    <option label="10">10</option>
    <option label="11">11</option>
  <div class="button minus" aria-hidden="true">
    <span class="hidden">
      Less cowbell
  <div class="button plus" aria-hidden="true">
    <span class="hidden">
      More cowbell

Developer notes

This example provides the simplest answer to a number input with a stepper control with minimal scripting.

Notice that the stepper buttons are hidden from the screen reader because it’s a better user experience to simply use the native select.

Using a select also eliminates any issues with the update being read by the screenreader on button press.

Notable failed prototype attempts

  • Do not use a input type="number" — NVDA doesn’t support number inputs
  • Wrapping a input type="text" with aria-live="assertive" isn’t reliably output across all screen readers on change events