# salla-quantity-input (https://docs.salla.dev/twilight/react/web-components/salla-quantity-input)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

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-label`s, and the input gets `aria-label="Quantity"` unless you pass `aria-label` or `aria-labelledby` on the host.

## Use it [#use-it]

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

```tsx
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 it [#try-it]

<Demo name="web-components/salla-quantity-input" />

## Example [#example]

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

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

```html
<salla-quantity-input cart-item-id="1234" value="2" max="10" name="quantity"></salla-quantity-input>
```

## Properties [#properties]

| Property     | Attribute      | Description                                                                                                     | Type  | Default |
| ------------ | -------------- | --------------------------------------------------------------------------------------------------------------- | ----- | ------- |
| `cartItemId` | `cart-item-id` | Cart item id. It is sent as `detail.productId` in the `change` event the input fires when the quantity changes. | `any` |         |

## Methods [#methods]

Call these on the element or a React ref.

### `decrease() => Promise<HTMLElement>` [#decrease--promisehtmlelement]

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>` [#increase--promisehtmlelement]

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>` [#setvaluevalue-any-firechangeevent-boolean--promisehtmlelement]

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.

| Parameter         | Type      | Description                                                                             |
| ----------------- | --------- | --------------------------------------------------------------------------------------- |
| `value`           | `any`     | The new quantity, as a number or a numeric string.                                      |
| `fireChangeEvent` | `boolean` | Pass `false` to update the value without firing the `change` event. Defaults to `true`. |

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

## Slots [#slots]

| Slot               | Description                                                 |
| ------------------ | ----------------------------------------------------------- |
| `decrement-button` | Replaces the default minus icon inside the decrease button. |
| `increment-button` | Replaces the default plus icon inside the increase button.  |

## Related [#related]

Used inside: [`<salla-order-edit>`](https://docs.salla.dev/twilight/react/web-components/salla-order-edit), [`<salla-order-edit-item>`](https://docs.salla.dev/twilight/react/web-components/salla-order-edit-item).