MazInputNumber

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

Basic usage

numberValue:

<script lang="ts" setup>
import MazInputNumber from 'maz-ui/components/MazInputNumber'
import { ref } from 'vue'
const numberValue = ref(2)
</script>

<template>
  <MazInputNumber
    v-model="numberValue"
    placeholder="Enter number"
    :min="5"
    :step="5"
    :max="10000"
    color="secondary"
    style="min-width: 200px"
  />
</template>

No buttons

You can remove the buttons with the props hide-buttons

<MazInputNumber v-model="numberValue" placeholder="Enter number" hide-buttons />

Props

Name	Description	Type	Required	Default
style	The inline style object for the component.	HTMLAttributes['style']	No	undefined
class	The CSS class name for the component.	HTMLAttributes['class']	No	undefined
model-value	v-model The value of the component (v-model).	number	No	undefined
disabled	Whether the input number is disabled or not.	boolean	No	false
max	The maximum value allowed for the input number.	number	No	Number.POSITIVE_INFINITY
min	The minimum value allowed for the input number.	number	No	Number.NEGATIVE_INFINITY
step	The step value for incrementing or decrementing the input number.	number	No	1
size	The size of the input number component.	MazSize	No	'md'
hide-buttons	Whether to hide the increment and decrement buttons or not.	boolean	No	false
text-center	Whether to center the text inside the input or not.	boolean	No	true
inputmode	The inputmode attribute for the input.	HTMLAttributes['inputmode']	No	'numeric'
block	The input will be displayed in full width	boolean	No	undefined
error	Will display the input in error state.	boolean	No	false
hint	The hint text to display below the input.	string	No	undefined
success	Will display the input in success state.	boolean	No	false
warning	Will display the input in warning state.	boolean	No	false
input-props	The props for the input component.	MazInputProps	No	undefined

Events

Event name	Properties	Description
focus	value Event - event object	Emitted when the input is focused
change	value Event - event object	Emitted when the value change
blur	value Event - event object	Emitted when the input is blurred
click	value Event - event object	Emitted input is clicked
update:model-value	value number | undefined - value of the input	Emitted when the input value change