Skip to content
LSD Framework
Component

Quantity input

A numeric stepper with a flanking −/+ pair. Bounds clamp at min and max; the value flips like an old split-flap board when it crosses an integer. Three surfaces, two densities, all keyboard-navigable.

01 · Default stepper
02 · Min / max validation (0–10)
Buttons grey at limits.
03 · Surface variants
Ghost · Outlined · pairs with framework surface tokens.
04 · Compact
05 · Labeled
Seats
Crates
06 · Disabled
View HTML
<div class="qty" data-min="0" data-max="10">
  <button class="qty__btn" data-step="-1">−</button>
  <input class="qty__input" type="number" value="1" />
  <button class="qty__btn" data-step="1">+</button>
</div>