Skip to content


MazInputNumber is a number input component with increment and decrement buttons for user-friendly input. Customizable size, disabled state, and limit values.


Before you have to import the global css files in your project, follow instructions in Getting Started


This component use MazInput, so it inherits all his props

Basic usage


No buttons

You can remove the buttons with the props no-buttons

Props & Event


Prop nameDescriptionTypeValuesDefault
styleThe inline style object for the component.TSIndexedAccessType-undefined
classThe CSS class name for the component.TSIndexedAccessType-undefined
modelValueThe value of the component (v-model).number-undefined
disabledWhether the input number is disabled or not.boolean-false
maxThe maximum value allowed for the input number.number-Number.POSITIVE_INFINITY
minThe minimum value allowed for the input number.number-Number.NEGATIVE_INFINITY
stepThe step value for incrementing or decrementing the input number.number-1
sizeThe size of the input number component.Size-'md'
noButtonsWhether to hide the increment and decrement buttons or not.boolean-false
textCenterWhether to center the text inside the input or not.boolean-true
inputmodeThe inputmode attribute for the input.TSIndexedAccessType-'numeric'
blockThe input will be displayed in full widthboolean-


Event namePropertiesDescription
focusvalue Event - event objectEmitted when the input is focused
changevalue Event - event objectEmitted when the value change
blurvalue Event - event objectEmitted when the input is blurred
clickvalue Event - event objectEmitted input is clicked
update:model-valuevalue number | undefined - value of the inputEmitted when the input value change