QuantitySelector

A component with increment and decrement buttons for adjusting quantities.

Anchor to propsProps

Anchor to maxQuantity maxQuantity number required: Maximum allowed quantity
Anchor to onQuantityChange onQuantityChange (quantity: number) => void required: Callback when quantity changes
Anchor to quantity quantity number required: Current quantity value
Anchor to disabled disabled boolean: Whether the selector is disabled
Anchor to minQuantity minQuantity number: Minimum allowed quantity (default: 1)

Examples

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}

)

}

Preview

Examples

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

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

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

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

Was this page helpful?