Component: Quantity Input control with plus / minus buttons

Overview

• Plus / minus buttons
• Min / max value limits
• Manual input support
• Input validation (numbers only)
• Lightweight and dependency-free

Basic usage

Use a wrapper with buttons and an input field inside.

<div class="quantity" data-anim-quantity>

   <button
      data-anim-quantity-minus
      type="button"
   ></button>

   <div class="quantity__input">

      <input
         data-anim-quantity-value
         type="text"
         value="1"
      >

   </div>

   <button
      data-anim-quantity-plus
      type="button"
   ></button>

</div>

Attributes

• data-anim-quantity — wrapper
• data-anim-quantity-value — input field
• data-anim-quantity-plus — increase value
• data-anim-quantity-minus — decrease value
• data-anim-quantity-min="1" — minimum value
• data-anim-quantity-max="10" — maximum value

Example with limits

<input
   data-anim-quantity-value
   value="1"
   data-anim-quantity-min="1"
   data-anim-quantity-max="10"
>

Behavior

1. Click "+" increases value
2. Click "−" decreases value
3. Value is limited by min / max
4. Only numeric input is allowed
5. Empty or invalid input resets to 1

Download

Use the Quantity component for product pages, forms, carts, and anywhere numeric input control is required.