---
title: QuantitySelector
description: A component with increment and decrement buttons for adjusting quantities.
source_url:
  html: >-
    https://shopify.dev/docs/api/shop-minis/components/primitives/quantityselector
  md: >-
    https://shopify.dev/docs/api/shop-minis/components/primitives/quantityselector.md
---

# QuantitySelector

A component with increment and decrement buttons for adjusting quantities.

#### Props

* **maxQuantity**

  **number**

  **required**

  Maximum allowed quantity

* **onQuantityChange**

  **(quantity: number) => void**

  **required**

  Callback when quantity changes

* **quantity**

  **number**

  **required**

  Current quantity value

* **disabled**

  **boolean**

  Whether the selector is disabled

* **minQuantity**

  **number**

  Minimum allowed quantity (default: 1)

Examples

## Preview

![quantityselector](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/QuantitySelector-5t-Rijfk.png)

### Examples

* ####

  ##### tsx

  ```tsx
  import {QuantitySelector} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const handleQuantityChange = newQuantity => {
      console.log('Quantity changed to:', newQuantity)
    }

    return (
      <QuantitySelector
        quantity={1}
        onQuantityChange={handleQuantityChange}
        maxQuantity={10}
      />
    )
  }
  ```

* ####

  ##### Description

  Quantity selector with a max value

  ##### tsx

  ```tsx
  import {QuantitySelector} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const handleQuantityChange = newQuantity => {
      console.log('Quantity changed to:', newQuantity)
    }

    return (
      <QuantitySelector
        quantity={1}
        onQuantityChange={handleQuantityChange}
        maxQuantity={10}
      />
    )
  }
  ```

* ####

  ##### Description

  Quantity selector with custom min values

  ##### tsx

  ```tsx
  import {QuantitySelector} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const handleQuantityChange = newQuantity => {
      console.log('Quantity changed to:', newQuantity)
    }

    return (
      <QuantitySelector
        quantity={5}
        onQuantityChange={handleQuantityChange}
        minQuantity={2}
        maxQuantity={50}
      />
    )
  }
  ```

* ####

  ##### Description

  Disabled quantity selector

  ##### tsx

  ```tsx
  import {QuantitySelector} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const handleQuantityChange = newQuantity => {
      console.log('Quantity changed to:', newQuantity)
    }

    return (
      <QuantitySelector
        quantity={3}
        onQuantityChange={handleQuantityChange}
        maxQuantity={10}
        disabled
      />
    )
  }
  ```

***