Quantity Controls

The QuantityControls component provides an interactive interface for managing quantities.

Example

Preview

1

Code

import { QuantityControls, QuantityCurrent, QuantityIncrement, QuantityDecrement } from '@hv/ui/quantity-controls';

<QuantityControls>
  <QuantityDecrement />
  <QuantityCurrent />
  <QuantityIncrement />
</QuantityControls>

Props

QuantityControls Props

Property	Description	Values
className	Custom CSS classes for styling the container	String
value	The initial value for the quantity	Number
onQuantityChanged	Callback triggered when the quantity changes	Function
max	Maximum allowed value for the quantity	Number
min	Minimum allowed value for the quantity	Number
debounce	Whether to debounce the onQuantityChanged callback	Boolean
delay	Delay time in milliseconds for debouncing	Number

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides. Class overrides can be applied to all sub-components.