Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/commerce/quantity-picker.

When to use it

Use QuantityPicker when the visitor should adjust item count with small predictable steps. It fits cart rows, buy boxes, and quick-view purchase flows.

If the quantity range is large or freeform numeric entry matters, another input pattern may be clearer.

Composition notes

value and onChange are the core state pair. Add min and max when business rules should clamp the allowed range, use size="sm" for tighter surfaces, and pass decrementAriaLabel, incrementAriaLabel, or valueAriaLabel when the surrounding storefront language should localize accessibility copy.

Use classNames when a consumer needs a different control personality without forking the behavior. The root remains controlled by className, while the internal value, buttons, and icons can be restyled semantically.

Keep the picker connected to the same inventory and pricing state as the rest of the purchase flow.

Behavior and theming guidance

Show clear feedback at the limits so visitors understand why they cannot decrement or increment further. If the max comes from inventory, consider pairing the picker with nearby stock messaging.

Use the smaller size only when surrounding controls are also compact. Mixing picker densities in one buy flow can feel uneven.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=QuantityPicker.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes