---
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
api_name: shop-minis
---

# Quantity​Selector

A component with increment and decrement buttons for adjusting quantities.

#### Props

* **max​Quantity**

  **number**

  **required**

  Maximum allowed quantity

* **on​Quantity​Change**

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

  **required**

  Callback when quantity changes

* **quantity**

  **number**

  **required**

  Current quantity value

* **disabled**

  **boolean**

  Whether the selector is disabled

* **min​Quantity**

  **number**

  Minimum allowed quantity (default: 1)

## Preview

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

### Examples

* #### QuantitySelector

  ##### 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}
      />
    )
  }
  ```

* #### Basic quantity selector

  ##### 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}
      />
    )
  }
  ```

* #### A more custom range

  ##### 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}
      />
    )
  }
  ```

* #### Disabled state

  ##### 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
      />
    )
  }
  ```

***