Skip to content

Quantity input

Preview Available in release assets

Collect a bounded numeric quantity with a native number input and optional, touch-friendly stepper buttons.

Quantity input in context

Show code
<div class="thin-field">
  <label for="quantity">Quantity</label>
  <div class="thin-quantity">
    <button type="button" data-quantity-decrement aria-label="Decrease quantity">
      <svg aria-hidden="true" data-icon>
        <use href="/icons/sprite.svg#thin-icon-minus">
        </use>
      </svg>
    </button>
    <input class="thin-input" id="quantity" name="quantity" type="number" inputmode="numeric" min="1" max="12" step="1" value="1" required aria-describedby="quantity-hint" />
    <button type="button" data-quantity-increment aria-label="Increase quantity">
      <svg aria-hidden="true" data-icon>
        <use href="/icons/sprite.svg#thin-icon-plus">
        </use>
      </svg>
    </button>
  </div>
  <span class="thin-hint" id="quantity-hint">Choose 1 to 12 items.</span>
</div>

Anatomy

  • Associated label
  • Native input[type=number]
  • Optional decrease and increase buttons
  • Hint or server error

Variants and sizes

  • Input only
  • Enhanced stepper
  • Decimal or localized unit label

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Minimum
  • Intermediate
  • Maximum
  • Invalid server response
  • Disabled
  • Read-only

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

The number input owns typing, keyboard stepping, validation, and submission. The optional behavior calls the native stepUp/stepDown methods and emits input and change events.

Accessibility

Give the input a visible label and localized button names. Bounds and errors must also be available as text; disabled buttons are not the only indication that a bound was reached.

Contract
NATIVE
Basis
Native number input plus labelled native buttons; no APG widget
Evidence
  • tests/unit/library/quantity-rating.test.ts

API

Use .thin-quantity around input[type=number].thin-input. Author native name, min, max, step, required, readonly, disabled, and aria-describedby attributes. Opt in to buttons with data-quantity-decrement/increment and enhanceQuantityInputs().

Behavior tier: dependency-free

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

The native number input retains keyboard entry, validation, and submission; stepper buttons are hidden without JavaScript.

Assets and dependencies

  • /components.css
  • /behaviors.js

Dependencies: None

Source: packages/ui/src/items/quantity-input/style.ts

Composition

Derived from the examples and style specs, not authored.

Composes