Quantity

Beta

The quantity stepper for product pages and carts: decrease, the number and increase, from 1 up to the stock left.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Add the component
$ npx ritla add quantity
Also works with shadcn: npx shadcn@latest add @ritla/quantity
Dependencies it brings
button
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

quantity.tsx

import { Quantity } from "@/components/ui/quantity";<Quantity value={quantity} onValueChange={setQuantity} max={stock} />

Prop	Type	Default	Description
`value / defaultValue / onValueChange`	`number`	`1`	The number.
`min`	`number`	`1`	The lowest number. A cart line is removed with its remove button, never by stepping to 0.
`max`	`number`	None	The stock left.
`size`	`"md" \| "sm"`	`"md"`	Figma's Size: 40px steppers for the product page, 32px for carts.
`label`	`string`	None	The field's name. In a cart, add the product (“Quantity, Lina chair”).
`decrementLabel / incrementLabel`	`string`	None	The steppers' names. Default “Decrease quantity” and “Increase quantity”.
`name / disabled`	`…`	None	As on Number Input.

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`ArrowUpArrowDown`	Steps up and down by one.
`Tab`	Decrease, then the field, then increase.

The field is a spinbutton between two named buttons; each button disables at the minimum or maximum.
The buttons are drawn at 40 and 32px, with a 48px touch area in height only, so it never covers the number.

Numerals: The number uses the page numerals and accepts Arabic-Indic digits when typed.
Arabic typography: label-16 Medium at md, label-14 Medium at sm.