salla-quantity-input

Numeric quantity field with increase and decrease buttons. Use it for cart line items or product pages where the customer picks a quantity. The inner text input is editable only when the store setting store.settings.product.manual_quantity is on; otherwise it is read-only and only the buttons change the value. The value is clamped to a minimum of 1 and, if the host has a max attribute, to that maximum. Initial value comes from the host value attribute (default 1). Other host attributes (for example name, max, aria-label) are copied to the inner input, except id, value, min and class. A bubbling change event is fired on the inner input after the quantity changes, with event.detail of { productId, quantity }, where productId is the value of cart-item-id.

Accessibility: the buttons have default aria-labels, and the input gets aria-label="Quantity" unless you pass aria-label or aria-labelledby on the host.

Use itCopy Anchor Link

In HTML or JSX, use the tag <salla-quantity-input> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaQuantityInput } from '@salla.sa/twilight-components-react/quantity-input';

Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

Try itCopy Anchor Link

ExampleCopy Anchor Link

import { SallaQuantityInput } from '@salla.sa/twilight-components-react/quantity-input';

export function Example() {
  return (
    <SallaQuantityInput cartItemId="1234" value="2" max="10" name="quantity" />
  );
}

PropertiesCopy Anchor Link

MethodsCopy Anchor Link

Call these on the element or a React ref.

decrease() => Promise<HTMLElement>Copy Anchor Link

Decreases the quantity by one (never below 1) and fires the change event.

Returns Promise<HTMLElement>: A Promise that resolves to the salla-quantity-input host element.

increase() => Promise<HTMLElement>Copy Anchor Link

Increases the quantity by one (not above the host max attribute, if set) and fires the change event.

Returns Promise<HTMLElement>: A Promise that resolves to the salla-quantity-input host element.

setValue(value: any, fireChangeEvent?: boolean) => Promise<HTMLElement>Copy Anchor Link

Sets the quantity. Non-digit characters are stripped, values below 1 or non-numeric become 1, and values above the host max attribute are clamped to it.

Returns Promise<HTMLElement>: A Promise that resolves to the salla-quantity-input host element.

SlotsCopy Anchor Link

RelatedCopy Anchor Link

Used inside: <salla-order-edit>, <salla-order-edit-item>.