MazInputNumber

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

INFO

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

TIP

This component use MazInput, so it inherits all his props

Basic usage

numberValue:

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

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

No buttons

You can remove the buttons with the props no-buttons

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

Props & Event

Props

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

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