Quantity Input

A numeric input component with increment and decrement buttons, perfect for shopping carts and inventory management

Sizes

Small

Medium

Large

Shopping Cart (1-10 items)

Quantity:
Current: 1 item

Inventory Management (0-1000, step 10)

Stock Level:
50 units in stock

Limited Range (2-10 only)

Select:
(minimum 2, maximum 10)

Custom Step Size (step by 5)

Value:
Increments by 5

Disabled State

Quantity:
(disabled)

In Form Context

QuantityInput Component
tsx
1import React, { useState, useEffect } from "react";
2import { Minus, Plus } from "lucide-react";
3import { cn } from "@/lib/cn";
4

5interface QuantityInputProps {
6  value?: number;
7  min?: number;
8  max?: number;
9  step?: number;
10  disabled?: boolean;