Input quantity

Interactive documentation for the quantity input component. Change props in the playground, inspect states, and copy the generated example.

Preview

<InputQuantity
  v-model="quantity"
  :max="10"
/>

Value: 1/ Max: 10

Examples for supported quantity input sizes and steps.

Common quantity input states for default, disabled, increment lock, and decrement lock.

This table matches the current InputQuantityProps interface.

Prop	Type	Default	Description
modelValue	number	1	Current quantity value used by v-model.
size	'l' \| 'xl'	'l'	Controls height, typography, icon size, spacing, and button width.
step	number	1	Increment and decrement step value. Values lower than 1 are normalized to 1.
max	number \| null	null	Maximum allowed quantity value. Null removes the upper limit.
disabled	boolean	false	Disables the entire quantity input and both action buttons.
disabledIncrement	boolean	false	Disables only the increment button.
disabledDecrement	boolean	false	Disables only the decrement button.
class	string	'w-full'	Additional classes applied to the root container.
id	string	'quantity'	Input id attribute used for accessibility and form association.
name	string	'quantity'	Native input name attribute used in form submissions.