Quantity picker

The minus and plus of a cart line: − 2 +. Inside it is its own numeric text field, so the figure can also be typed by hand and never goes beyond the limits.

When to use it

• The quantity of each product in the cart, or on the product page before "Add to cart".
• value and onChange to control it from outside, or initialValue (1 by default) to leave it uncontrolled; name sends it in a native form. min is the lowest (1 by default).
• max with the stock: when reached, the add button is truly disabled. From warnFrom units (5 by default) it says how many are left ("3 left", or "Out of stock" with 0); a large stock is not shown.
• It is the box of NumberField with buttons: size (30, 36 or 44 px) and variant (outline, soft, ghost) are the same as for all fields, and in a form it stays aligned with them.
• readOnly on an already closed order: the figure can be read and focused, but does not change; disabled while it cannot be touched.

When not to

• A number that is not a cart quantity (an amount, a percentage, a weight): NumberField.
• Choosing the size or the metal before the quantity: VariantPicker.

Keyboard: Tab reaches the figure; up arrow and down arrow add and subtract one, Page Up and Page Down make a bigger jump, and Home and End go to the limits (End only if there is max). The number can be typed: on leaving or with Enter, anything beyond a limit stays at the limit (99 with 4 in stock stays at 4). The buttons are not in the Tab order: with the keyboard, the arrow keys are used.

Accessibility: the label (label) is required and specific ("Quantity of Aurelia Ring"), because in a cart there is one picker per line. By default only the screen reader hears it (hiddenLabel, on out of the box); with hiddenLabel={false} it is visible as the label of the fields. The buttons are real buttons, "Remove one" and "Add one", with their disabled state. The stock warning is read as the description of the figure and enters with a short transition. The focus is the 2 px ring of the fields on the box. With a finger, the box becomes 48 px, each button 44 px wide and the figure 16 px, so that the iPhone does not zoom the page.

Context: the language of LocaleProvider (or AmsetProvider) decides how the figure is written; without a provider, es-ES.

Fine-tuning: --amset-quantity-figures (how many digits fit without the box growing; 3 by default) and the field variables, --amset-field-* (height, padding, font, radius, background and border). The buttons are those of NumberField (amset-number__step) and the warning is amset-quantity__stock.