Quantity Stepper

Increment/decrement controls for adjusting quantities with sizes, vertical layout, and compact variants.

Basic Quantity Stepper

Preview

<div class="quantity-stepper">
  <button class="quantity-stepper-btn quantity-stepper-btn-minus" aria-label="Decrease quantity">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
  <input class="quantity-stepper-input" type="number" value="1" min="0" max="99" aria-label="Quantity">
  <button class="quantity-stepper-btn quantity-stepper-btn-plus" aria-label="Increase quantity">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
</div>

Requires: ux.min.css

<div class="inline-flex items-center select-none overflow-hidden h-11 bg-base-200 border border-base-300 rounded-field">
  <button class="flex items-center justify-center h-full w-11 p-0 bg-transparent border-none text-primary hover:bg-primary/10 active:bg-primary/15 active:scale-95" aria-label="Decrease quantity">
    <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
  <input class="h-full w-14 p-0 bg-transparent border-x border-base-300 text-center font-semibold text-base appearance-none focus:outline-none focus:bg-primary/5" type="number" value="1" min="0" max="99" aria-label="Quantity">
  <button class="flex items-center justify-center h-full w-11 p-0 bg-transparent border-none text-primary hover:bg-primary/10 active:bg-primary/15 active:scale-95" aria-label="Increase quantity">
    <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
</div>

Requires: tw.min.css

// Basic stepper logic
document.querySelectorAll('.quantity-stepper').forEach(stepper => {
  const input = stepper.querySelector('.quantity-stepper-input');
  const min = parseInt(input.min) || 0;
  const max = parseInt(input.max) || 99;

  stepper.querySelector('.quantity-stepper-btn-minus').addEventListener('click', () => {
    const val = parseInt(input.value) || 0;
    if (val > min) input.value = val - 1;
  });

  stepper.querySelector('.quantity-stepper-btn-plus').addEventListener('click', () => {
    const val = parseInt(input.value) || 0;
    if (val < max) input.value = val + 1;
  });
});

Sizes

Preview

<!-- Small -->
<div class="quantity-stepper quantity-stepper-sm">
  <button class="quantity-stepper-btn quantity-stepper-btn-minus" aria-label="Decrease">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
  <input class="quantity-stepper-input" type="number" value="3" min="0" max="99" aria-label="Quantity">
  <button class="quantity-stepper-btn quantity-stepper-btn-plus" aria-label="Increase">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
</div>

<!-- Default -->
<div class="quantity-stepper">
  <button class="quantity-stepper-btn quantity-stepper-btn-minus" aria-label="Decrease">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
  <input class="quantity-stepper-input" type="number" value="5" min="0" max="99" aria-label="Quantity">
  <button class="quantity-stepper-btn quantity-stepper-btn-plus" aria-label="Increase">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
</div>

<!-- Large -->
<div class="quantity-stepper quantity-stepper-lg">
  <button class="quantity-stepper-btn quantity-stepper-btn-minus" aria-label="Decrease">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
  <input class="quantity-stepper-input" type="number" value="10" min="0" max="99" aria-label="Quantity">
  <button class="quantity-stepper-btn quantity-stepper-btn-plus" aria-label="Increase">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
</div>

Requires: ux.min.css

<div class="flex items-end gap-4">
  <!-- Small: h-9, w-9 buttons, w-11 input, text-sm -->
  <div class="inline-flex items-center select-none overflow-hidden h-9 bg-base-200 border border-base-300 rounded-field">
    <button class="flex items-center justify-center h-full w-9 p-0 bg-transparent border-none text-primary hover:bg-primary/10 active:scale-95" aria-label="Decrease"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
    <input class="h-full w-11 p-0 bg-transparent border-x border-base-300 text-center font-semibold text-sm appearance-none focus:outline-none" type="number" value="3" aria-label="Quantity">
    <button class="flex items-center justify-center h-full w-9 p-0 bg-transparent border-none text-primary hover:bg-primary/10 active:scale-95" aria-label="Increase"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
  </div>
  <!-- Default: h-11 -->
  <div class="inline-flex items-center select-none overflow-hidden h-11 bg-base-200 border border-base-300 rounded-field">
    <button class="flex items-center justify-center h-full w-11 p-0 bg-transparent border-none text-primary hover:bg-primary/10 active:scale-95" aria-label="Decrease"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
    <input class="h-full w-14 p-0 bg-transparent border-x border-base-300 text-center font-semibold text-base appearance-none focus:outline-none" type="number" value="5" aria-label="Quantity">
    <button class="flex items-center justify-center h-full w-11 p-0 bg-transparent border-none text-primary hover:bg-primary/10 active:scale-95" aria-label="Increase"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
  </div>
  <!-- Large: h-13, w-13 buttons, w-17 input, text-lg -->
  <div class="inline-flex items-center select-none overflow-hidden h-13 bg-base-200 border border-base-300 rounded-field">
    <button class="flex items-center justify-center h-full w-13 p-0 bg-transparent border-none text-primary hover:bg-primary/10 active:scale-95" aria-label="Decrease"><svg class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
    <input class="h-full w-17 p-0 bg-transparent border-x border-base-300 text-center font-semibold text-lg appearance-none focus:outline-none" type="number" value="10" aria-label="Quantity">
    <button class="flex items-center justify-center h-full w-13 p-0 bg-transparent border-none text-primary hover:bg-primary/10 active:scale-95" aria-label="Increase"><svg class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
  </div>
</div>

Requires: tw.min.css

// No JS needed -- sizes are controlled by CSS modifier classes:
// .quantity-stepper-sm (36px), default (44px), .quantity-stepper-lg (52px)

Vertical & Compact

Preview

Vertical

Compact

Compact Round

<div style="display: flex; align-items: start; gap: 2rem;">
  <!-- Vertical -->
  <div>
    <p style="font-size: 0.75rem; color: var(--color-base-content); opacity: 0.5; margin-bottom: 0.5rem;">Vertical</p>
    <div class="quantity-stepper quantity-stepper-vertical">
      <button class="quantity-stepper-btn quantity-stepper-btn-plus" aria-label="Increase">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
      <input class="quantity-stepper-input" type="number" value="4" min="0" max="99" aria-label="Quantity">
      <button class="quantity-stepper-btn quantity-stepper-btn-minus" aria-label="Decrease">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
    </div>
  </div>

  <!-- Compact -->
  <div>
    <p style="font-size: 0.75rem; color: var(--color-base-content); opacity: 0.5; margin-bottom: 0.5rem;">Compact</p>
    <div class="quantity-stepper quantity-stepper-compact">
      <button class="quantity-stepper-btn quantity-stepper-btn-minus" aria-label="Decrease">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
      <input class="quantity-stepper-input" type="number" value="2" min="0" max="99" aria-label="Quantity">
      <button class="quantity-stepper-btn quantity-stepper-btn-plus" aria-label="Increase">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
    </div>
  </div>

  <!-- Compact + Round -->
  <div>
    <p style="font-size: 0.75rem; color: var(--color-base-content); opacity: 0.5; margin-bottom: 0.5rem;">Compact Round</p>
    <div class="quantity-stepper quantity-stepper-compact quantity-stepper-round">
      <button class="quantity-stepper-btn quantity-stepper-btn-minus" aria-label="Decrease">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
      <input class="quantity-stepper-input" type="number" value="7" min="0" max="99" aria-label="Quantity">
      <button class="quantity-stepper-btn quantity-stepper-btn-plus" aria-label="Increase">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex items-start gap-8">
  <!-- Vertical: flex-col, w-11, buttons w-full h-11, input order-2 -->
  <div>
    <p class="text-xs text-base-content/50 mb-2">Vertical</p>
    <div class="inline-flex flex-col items-center select-none overflow-hidden w-11 bg-base-200 border border-base-300 rounded-field">
      <button class="flex items-center justify-center w-full h-11 order-1 p-0 bg-transparent border-none text-primary hover:bg-primary/10 active:scale-95"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
      <input class="w-full h-11 order-2 p-0 bg-transparent border-y border-base-300 text-center font-semibold appearance-none focus:outline-none" type="number" value="4">
      <button class="flex items-center justify-center w-full h-11 order-3 p-0 bg-transparent border-none text-primary hover:bg-primary/10 active:scale-95"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
    </div>
  </div>
  <!-- Compact: narrower input w-9 -->
  <div>
    <p class="text-xs text-base-content/50 mb-2">Compact</p>
    <div class="inline-flex items-center select-none overflow-hidden h-11 bg-base-200 border border-base-300 rounded-field">
      <button class="flex items-center justify-center h-full w-11 p-0 bg-transparent border-none text-primary hover:bg-primary/10 active:scale-95"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
      <input class="h-full w-9 p-0 bg-transparent text-center font-semibold appearance-none focus:outline-none" type="number" value="2">
      <button class="flex items-center justify-center h-full w-11 p-0 bg-transparent border-none text-primary hover:bg-primary/10 active:scale-95"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
    </div>
  </div>
  <!-- Compact Round: rounded-full -->
  <div>
    <p class="text-xs text-base-content/50 mb-2">Compact Round</p>
    <div class="inline-flex items-center select-none overflow-hidden h-11 bg-base-200 border border-base-300 rounded-full">
      <button class="flex items-center justify-center h-full w-11 p-0 bg-transparent border-none text-primary hover:bg-primary/10 active:scale-95"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
      <input class="h-full w-9 p-0 bg-transparent text-center font-semibold appearance-none focus:outline-none" type="number" value="7">
      <button class="flex items-center justify-center h-full w-11 p-0 bg-transparent border-none text-primary hover:bg-primary/10 active:scale-95"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
    </div>
  </div>
</div>

Requires: tw.min.css

// Vertical stepper uses the same JS logic as the basic stepper.
// The CSS handles the layout change via .quantity-stepper-vertical.
// The minus button gets order:3, plus gets order:1, input gets order:2.

Colors, Glass & Disabled

Preview

Success

Error

Glass

Disabled

<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;">
  <!-- Success color -->
  <div>
    <p style="font-size: 0.75rem; color: var(--color-base-content); opacity: 0.5; margin-bottom: 0.5rem;">Success</p>
    <div class="quantity-stepper color-success">
      <button class="quantity-stepper-btn quantity-stepper-btn-minus" aria-label="Decrease">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
      <input class="quantity-stepper-input" type="number" value="12" aria-label="Quantity">
      <button class="quantity-stepper-btn quantity-stepper-btn-plus" aria-label="Increase">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
    </div>
  </div>

  <!-- Error color -->
  <div>
    <p style="font-size: 0.75rem; color: var(--color-base-content); opacity: 0.5; margin-bottom: 0.5rem;">Error</p>
    <div class="quantity-stepper color-error">
      <button class="quantity-stepper-btn quantity-stepper-btn-minus" aria-label="Decrease">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
      <input class="quantity-stepper-input" type="number" value="0" aria-label="Quantity">
      <button class="quantity-stepper-btn quantity-stepper-btn-plus" aria-label="Increase">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
    </div>
  </div>

  <!-- Glass -->
  <div>
    <p style="font-size: 0.75rem; color: var(--color-base-content); opacity: 0.5; margin-bottom: 0.5rem;">Glass</p>
    <div class="quantity-stepper glass">
      <button class="quantity-stepper-btn quantity-stepper-btn-minus" aria-label="Decrease">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
      <input class="quantity-stepper-input" type="number" value="8" aria-label="Quantity">
      <button class="quantity-stepper-btn quantity-stepper-btn-plus" aria-label="Increase">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
    </div>
  </div>

  <!-- Disabled -->
  <div>
    <p style="font-size: 0.75rem; color: var(--color-base-content); opacity: 0.5; margin-bottom: 0.5rem;">Disabled</p>
    <div class="quantity-stepper quantity-stepper-disabled">
      <button class="quantity-stepper-btn quantity-stepper-btn-minus" disabled aria-label="Decrease">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
      <input class="quantity-stepper-input" type="number" value="5" disabled aria-label="Quantity">
      <button class="quantity-stepper-btn quantity-stepper-btn-plus" disabled aria-label="Increase">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-wrap items-center gap-6">
  <!-- Success: text-success on buttons, hover:bg-success/10 -->
  <div class="inline-flex items-center select-none overflow-hidden h-11 bg-base-200 border border-base-300 rounded-field">
    <button class="flex items-center justify-center h-full w-11 p-0 bg-transparent border-none text-success hover:bg-success/10 active:scale-95"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
    <input class="h-full w-14 p-0 bg-transparent border-x border-base-300 text-center font-semibold appearance-none focus:outline-none" type="number" value="12">
    <button class="flex items-center justify-center h-full w-11 p-0 bg-transparent border-none text-success hover:bg-success/10 active:scale-95"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
  </div>
  <!-- Error: text-error on buttons -->
  <div class="inline-flex items-center select-none overflow-hidden h-11 bg-base-200 border border-base-300 rounded-field">
    <button class="flex items-center justify-center h-full w-11 p-0 bg-transparent border-none text-error hover:bg-error/10 active:scale-95"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
    <input class="h-full w-14 p-0 bg-transparent border-x border-base-300 text-center font-semibold appearance-none focus:outline-none" type="number" value="0">
    <button class="flex items-center justify-center h-full w-11 p-0 bg-transparent border-none text-error hover:bg-error/10 active:scale-95"><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
  </div>
  <!-- Disabled: opacity-50, pointer-events-none -->
  <div class="inline-flex items-center select-none overflow-hidden h-11 bg-base-200 border border-base-300 rounded-field opacity-50 pointer-events-none">
    <button class="flex items-center justify-center h-full w-11 p-0 bg-transparent border-none text-primary" disabled><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
    <input class="h-full w-14 p-0 bg-transparent border-x border-base-300 text-center font-semibold appearance-none" type="number" value="5" disabled>
    <button class="flex items-center justify-center h-full w-11 p-0 bg-transparent border-none text-primary" disabled><svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
  </div>
</div>

Requires: tw.min.css

// Color variants use CSS classes:
// .color-success - green buttons
// .color-error   - red buttons
// .glass         - glass morphism background
// .quantity-stepper-disabled - disables the entire stepper

// Disable individual buttons when at min/max
stepper.querySelector('.quantity-stepper-btn-minus')
  .classList.toggle('quantity-stepper-btn-disabled', val <= min);
stepper.querySelector('.quantity-stepper-btn-plus')
  .classList.toggle('quantity-stepper-btn-disabled', val >= max);

Classes Reference

Class	Description
`.quantity-stepper`	Base container (44px height, inline-flex)
`.quantity-stepper-sm`	Small size (36px height, smaller buttons and input)
`.quantity-stepper-lg`	Large size (52px height, larger buttons and input)
`.quantity-stepper-vertical`	Vertical layout with plus on top, minus on bottom
`.quantity-stepper-compact`	Narrower input field, no side borders on input
`.quantity-stepper-round`	Fully rounded (pill shape)
`.quantity-stepper.glass`	Glass morphism variant
`.quantity-stepper.color-success`	Green-colored buttons
`.quantity-stepper.color-error`	Red-colored buttons
`.quantity-stepper-disabled`	Disables entire stepper (opacity + pointer-events)
`.quantity-stepper-btn`	Increment/decrement button
`.quantity-stepper-btn-minus`	Minus button (used for ordering in vertical layout)
`.quantity-stepper-btn-plus`	Plus button (used for ordering in vertical layout)
`.quantity-stepper-btn-disabled`	Disabled state for individual button
`.quantity-stepper-btn-pressing`	Active/pressing state for long-press feedback
`.quantity-stepper-input`	Numeric input field (centered, no spinners)