> For the complete documentation index, see [llms.txt](https://3merge.gitbook.io/q3/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://3merge.gitbook.io/q3/client/q3-components/quantity.md).

# Quantity

Number input for incrementing whole numbers

```
yarn add q3-components
```

{% hint style="info" %}
 Quantity is used extensively in the `q3-ui-cart` package. For more examples, I'd suggest taking a look at the repository.
{% endhint %}

{% code title="MyQuantity.jsx" %}

```jsx
import React from 'react';
import { Quantity } from 'q3-components';

export default () => (
    <Quantity variant="spread" size="small"> 
        {(quantity, reset) => null}
    </Quantity>
);
```

{% endcode %}

### Props

| Prop      | Type     | Description                                                    |
| --------- | -------- | -------------------------------------------------------------- |
| `size`    | `string` | Use either "small" or "large"; it defaults to "regular"        |
| `variant` | `string` | Use either "spread" or "stacked" to control the toggle display |