Spinbutton

What is a spin button?

A spin button is a UI control that lets users increment or decrement a value one step at a time using + / − (or ↑ / ↓), selecting a number within a given range. It is commonly used for specifying quantities, counts, or floor numbers.

It is similar to a slider, but a spin button excels at selecting precise, discrete values. The information it needs to convey is the same: the current value, the range (minimum and maximum), and keyboard interaction.

Why does accessibility matter?

• People who rely on the keyboard. If the + and − buttons are <div> elements, they cannot receive focus or be activated, making it impossible to change the value. Users also expect to increment and decrement with ↑ and ↓.
• People who use screen readers. Without the role (spinbutton), current value, and range being communicated, users cannot tell "what is the current value" or "how much further can I go."

The easiest way to meet all of these requirements is to use the native <input type="number">. The browser provides the increment/decrement buttons, keyboard interaction, and screen reader announcements automatically.

Live demo (recommended implementation)

Below is a native <input type="number">.Without using a mouse, focus the input and try changing the value with ↑ and ↓.

Keyboard interaction

Required WAI-ARIA roles and properties

Implementation: recommended pattern (Good)

Markup:

<label for="qty">Quantity</label>
<input
  type="number"
  id="qty"
  name="qty"
  min="1"
  max="10"
  step="1"
  value="1" />

Only when design requirements absolutely prevent using the native element should you build a custom one with role="spinbutton". Make the + and − real <button> elements, and handle ↑↓ on the spinbutton itself.

<!-- Only build a custom one when native doesn't meet design requirements -->
<span id="ppl-label">Number of adults</span>
<div class="spin">
  <button type="button" data-dec aria-label="Decrease">−</button>
  <div role="spinbutton"
       tabindex="0"
       aria-labelledby="ppl-label"
       aria-valuemin="1"
       aria-valuemax="9"
       aria-valuenow="2"
       id="ppl-spin">2</div>
  <button type="button" data-inc aria-label="Increase">+</button>
</div>

const spin = document.getElementById('ppl-spin');
const MIN = 1, MAX = 9, STEP = 1;

function setValue(next) {
  const v = Math.min(MAX, Math.max(MIN, next));
  spin.setAttribute('aria-valuenow', String(v));
  spin.textContent = String(v); // Keep the visual display in sync
}

document.querySelector('[data-inc]').addEventListener('click', () =>
  setValue(Number(spin.getAttribute('aria-valuenow')) + STEP)
);
document.querySelector('[data-dec]').addEventListener('click', () =>
  setValue(Number(spin.getAttribute('aria-valuenow')) - STEP)
);

// Allow incrementing/decrementing with ↑↓ when the spinbutton itself has focus
spin.addEventListener('keydown', (e) => {
  const now = Number(spin.getAttribute('aria-valuenow'));
  if (e.key === 'ArrowUp')   { e.preventDefault(); setValue(now + STEP); }
  if (e.key === 'ArrowDown') { e.preventDefault(); setValue(now - STEP); }
  if (e.key === 'Home') { e.preventDefault(); setValue(MIN); }
  if (e.key === 'End')  { e.preventDefault(); setValue(MAX); }
});

Anti-pattern (Bad)

Below is a spin button built with a text input and <div>-based + and − buttons.You can click them with a mouse, but you cannot increment/decrement with the keyboard, and neither the value nor the range is announced.

<!-- ❌ Anti-pattern: text input + div-based + and − buttons -->
<span>Quantity</span>
<div class="spin">
  <div class="btn" onclick="dec()">−</div>   <!-- div: not focusable -->
  <input type="text" id="qty" value="1">      <!-- No label, not a number input -->
  <div class="btn" onclick="inc()">+</div>
</div>
<!--
  No role="spinbutton" or aria-valuenow/min/max.
  The + and − are divs, so they can't be reached by keyboard,
  and the value and range are not announced to assistive technologies.
-->

Implementation checklist

• Considered using <input type="number"> first (preferred approach)
• The input/element has a label (<label for> or aria-label/aria-labelledby)
• + and - are real <button> elements and are keyboard-operable
• Up/Down arrow keys can increment and decrement the value
• Custom implementation includes role="spinbutton" with aria-valuemin, aria-valuemax, and aria-valuenow
• aria-valuenow is updated on every increment or decrement
• Value does not exceed the defined range (stops at minimum and maximum)
• Focus is visible (focus ring is not suppressed)

Source (English):Spinbutton Pattern — W3C APG(opens in a new tab)