Forms · Complete runnable example

Quantity stepper with sample total

Keep a typed quantity, step buttons, and a sample total in agreement.

Try the example Read and copy the source

Live example

Preview width

This preview runs in an isolated document. Clipboard writes and saved preferences may be blocked, and printing requires the standalone file. A dialog affects only the example. Reset reloads the original example state.

When to use it

Use a native number field when a bounded whole-number quantity is useful. This fictional stationery calculation demonstrates clear limits without implementing a cart or checkout.

Try the important details

Increase to 12 and decrease to 1, checking the disabled boundary buttons.
Type an empty value, 0, 13, or 1.5 and inspect the error and withheld total.
Enter 3 to see $37.50, then reset to 2 and confirm the field receives focus.

How it works

Native min, max, step, and required constraints are checked alongside finite integer validation.
Invalid values remain visible for correction; buttons disable and the total stops showing an outdated number.
The buttons call stepUp and stepDown. Unit price is an integer number of cents and Intl.NumberFormat presents USD.

Make it yours

Copy the complete HTML below or download it as a file. Open it directly in your browser, then adapt its content, colors, and identifiers in your editor. Keep the CSS and script with the markup when using the full example.

Limits and integration

The sample price is fictional and no purchase is made. Client-side checks are not authoritative pricing or stock validation. Native number input behavior varies by browser; calculated totals require JavaScript.

The included content security policy allows this local example’s inline styles and scripts while blocking network connections, form delivery, plugins, and base-URL changes. Review that policy when integrating the pattern into an existing site.

Pattern reference

MDN number input min, max, and step reference

The implementation and sample content are original MRHTML examples. The full source contains the MIT permission notice.

The complete source

The preview, copied text, and downloaded file use this same document.

HTML

<!doctype html>
<!--
MIT License

Copyright (c) 2026 MRHTML

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data: blob:; connect-src 'none'; form-action 'none'; object-src 'none'; base-uri 'none'"
    />
    <title>A considered quantity. | MRHTML example</title>
    <style>
      :root {
        color-scheme: light;
        --ink: #202b36;
        --muted: #596675;
        --line: #d5dde4;
        --blue: #2349c8;
        --pale: #edf1ff;
        --paper: #fff;
        --danger: #a32b30;
        font-family: Arial, Helvetica, sans-serif;
      }
      * {
        box-sizing: border-box;
      }
      [hidden] {
        display: none !important;
      }
      body {
        margin: 0;
        min-width: 0;
        padding: 42px 22px;
        background: #f2f4f7;
        color: var(--ink);
        line-height: 1.55;
      }
      main {
        max-width: 690px;
        margin: auto;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 25px;
        color: var(--muted);
        font-size: 12px;
        letter-spacing: 0.04em;
      }
      .brand b {
        color: var(--ink);
        letter-spacing: -0.05em;
        font-size: 17px;
      }
      .brand b span {
        color: var(--blue);
      }
      .brand i {
        flex: 1;
        height: 1px;
        background: var(--line);
      }
      .card {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 32px;
        box-shadow: 0 12px 36px #263a5110;
      }
      .eyebrow {
        margin: 0 0 12px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--blue);
      }
      h1 {
        font-size: clamp(29px, 5vw, 38px);
        line-height: 1.13;
        letter-spacing: -0.04em;
        margin: 0 0 14px;
      }
      h2 {
        font-size: 20px;
        line-height: 1.3;
        margin: 0 0 14px;
      }
      p {
        margin: 0 0 18px;
      }
      .intro {
        color: var(--muted);
        max-width: 55ch;
      }
      .hint,
      .small {
        font-size: 13px;
        color: var(--muted);
      }
      .hint {
        margin: 9px 0 0;
      }
      .footer {
        font-size: 12px;
        color: var(--muted);
        margin: 20px 2px 0;
      }
      label,
      legend {
        font-weight: 700;
        font-size: 14px;
      }
      label.field {
        display: block;
        margin: 18px 0 7px;
      }
      fieldset {
        min-width: 0;
        margin: 22px 0;
        padding: 20px;
        border: 1px solid var(--line);
        border-radius: 10px;
      }
      legend {
        padding: 0 7px;
      }
      input,
      select,
      textarea,
      button {
        font: inherit;
      }
      input:not([type='checkbox']):not([type='radio']),
      select,
      textarea {
        width: 100%;
        min-width: 0;
        color: var(--ink);
        background: #fff;
        border: 1px solid #8896a5;
        border-radius: 7px;
        padding: 11px 12px;
        font-size: 16px;
      }
      input[type='checkbox'],
      input[type='radio'] {
        accent-color: var(--blue);
        width: 18px;
        height: 18px;
        flex: none;
      }
      textarea {
        display: block;
        resize: vertical;
      }
      button {
        border: 1px solid var(--blue);
        border-radius: 7px;
        min-height: 44px;
        padding: 10px 17px;
        background: var(--blue);
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
      }
      button.secondary {
        background: #fff;
        color: var(--blue);
      }
      button:disabled {
        cursor: default;
        opacity: 0.55;
      }
      input:disabled,
      select:disabled {
        background: #f0f2f5;
        color: #596675;
      }
      :focus-visible {
        outline: 3px solid #d46a20;
        outline-offset: 3px;
      }
      .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 22px;
      }
      .status {
        margin: 18px 0 0;
        font-size: 14px;
        min-height: 1.6em;
      }
      .error {
        color: var(--danger);
      }
      .panel {
        background: var(--pale);
        padding: 20px;
        border-radius: 10px;
        margin-top: 24px;
      }
      .panel p:last-child {
        margin-bottom: 0;
      }
      .row {
        display: flex;
        gap: 12px;
        align-items: center;
      }
      .sr {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
      }
      noscript p {
        border-left: 3px solid #9b6300;
        background: #fff4d6;
        padding: 12px;
        font-size: 14px;
        margin-top: 20px;
      }
      code {
        overflow-wrap: anywhere;
      }
      @media (max-width: 450px) {
        body {
          padding: 25px 14px;
        }
        .card {
          padding: 23px 19px;
          border-radius: 13px;
        }
        fieldset {
          padding: 16px 13px;
        }
        .brand {
          margin-bottom: 18px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation: none !important;
          transition: none !important;
          scroll-behavior: auto !important;
        }
      }

      .product {
        display: flex;
        gap: 23px;
        align-items: center;
        border-block: 1px solid var(--line);
        padding: 23px 0;
        margin: 24px 0;
      }
      .product p {
        margin-bottom: 0;
      }
      .product h2 {
        margin: 7px 0;
      }
      .book {
        flex: none;
        width: 76px;
        height: 99px;
        transform: rotate(-6deg);
        background: #e9af68;
        border: 1px solid #9e6726;
        border-left: 7px solid #965a23;
        padding: 14px 9px;
        box-shadow: 4px 4px 0 #eee4d5;
        color: #463318;
      }
      .book span {
        font: 10px/1.3 monospace;
      }
      .stepper {
        display: flex;
        gap: 10px;
        max-width: 250px;
      }
      .stepper button {
        width: 48px;
        flex: none;
        font-size: 21px;
        padding: 5px;
      }
      .stepper input {
        text-align: center;
      }
      .total-row {
        border-top: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 15px;
        padding-top: 20px;
      }
      .total-row output {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -0.04em;
        text-align: right;
      }
    </style>
  </head>
  <body>
    <main>
      <p class="brand">
        <b>MR<span>HTML</span></b
        ><span>THE INTERACTION NOTEBOOK</span><i aria-hidden="true"></i>
      </p>
      <section class="card" aria-labelledby="title">
        <p class="eyebrow">07 / Quantity stepper</p>
        <h1 id="title">A considered quantity.</h1>
        <p class="intro">
          A native number field with useful boundaries and a live sample total.
          This is a calculation demo, not a checkout.
        </p>
        <div class="product">
          <div class="book" aria-hidden="true">
            <span>FIELD<br />NOTES</span>
          </div>
          <div>
            <p class="eyebrow">FICTIONAL STATIONERY</p>
            <h2>Field notebook</h2>
            <p class="small">Sample unit price: $12.50 USD</p>
          </div>
        </div>
        <label class="field" for="quantity">Quantity</label>
        <div class="stepper">
          <button
            id="decrease"
            type="button"
            class="secondary"
            aria-label="Decrease quantity"
            disabled
          >
            −</button
          ><input
            id="quantity"
            type="number"
            min="1"
            max="12"
            step="1"
            value="2"
            required
            inputmode="numeric"
            aria-describedby="quantity-help quantity-error"
          /><button
            id="increase"
            type="button"
            class="secondary"
            aria-label="Increase quantity"
            disabled
          >
            +
          </button>
        </div>
        <p id="quantity-help" class="hint">
          Whole numbers from 1 to 12. You can type or use the arrow keys.
        </p>
        <p id="quantity-error" class="status error" role="alert"></p>
        <div class="total-row" id="total-row" hidden>
          <span>Sample total</span
          ><output id="total" for="quantity" aria-live="polite">$25.00</output>
        </div>
        <div class="actions">
          <button id="reset-quantity" type="button" class="secondary" disabled>
            Reset to 2
          </button>
        </div>
        <noscript
          ><p>
            The native number field retains its min, max, and step constraints.
            Extra buttons and the calculated total require JavaScript. Nothing
            can be purchased.
          </p></noscript
        >
      </section>
      <p class="footer">A local MRHTML example. Nothing is sent or saved.</p>
    </main>
    <script>
      (function () {
        'use strict';

        var quantity = document.getElementById('quantity'),
          decrease = document.getElementById('decrease'),
          increase = document.getElementById('increase'),
          total = document.getElementById('total'),
          error = document.getElementById('quantity-error'),
          reset = document.getElementById('reset-quantity');
        var money = new Intl.NumberFormat('en-US', {
          style: 'currency',
          currency: 'USD',
        });
        function update() {
          var value = quantity.valueAsNumber;
          var valid =
            quantity.validity.valid &&
            Number.isFinite(value) &&
            Number.isInteger(value) &&
            value >= 1 &&
            value <= 12;
          quantity.setAttribute('aria-invalid', String(!valid));
          error.textContent = valid ? '' : 'Enter a whole number from 1 to 12.';
          total.textContent = valid
            ? money.format((value * 1250) / 100)
            : 'Enter a valid quantity';
          decrease.disabled = !valid || value <= 1;
          increase.disabled = !valid || value >= 12;
        }
        quantity.addEventListener('input', update);
        quantity.addEventListener('change', update);
        decrease.addEventListener('click', function () {
          if (decrease.disabled) return;
          quantity.stepDown();
          update();
        });
        increase.addEventListener('click', function () {
          if (increase.disabled) return;
          quantity.stepUp();
          update();
        });
        reset.addEventListener('click', function () {
          quantity.value = '2';
          update();
          quantity.focus();
        });
        document.getElementById('total-row').hidden = false;
        reset.disabled = false;
        update();
      })();
    </script>
  </body>
</html>

Quantity stepper with sample total

Live example

When to use it

Try the important details

How it works

The complete source

Build on the pattern

Form validation with inline errors

Dependent native select fields