MazInputNumber

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

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

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 />

Tips

TIP

This component use MazInput, so it inherits all his props

Props

Name	Description	Type	Required	Default	Possible values
id	The id of the input.	string	No	-	-
model-value	v-model The value of the component (v-model).	number	No	-	-
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.	"xs" | "sm" | "md" | "lg" | "xl" | "mini"	No	'md'	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'mini'
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.	"none" | "text" | "search" | "url" | "email" | "tel" | "numeric" | "decimal"	No	"numeric"	'none' | 'text' | 'search' | 'url' | 'email' | 'tel' | 'numeric' | 'decimal'
block	The input will be displayed in full width	boolean	No	-	-
error	Will display the input in error state.	boolean	No	false	-
hint	The hint text to display below the input.	string	No	-	-
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<MazInputValue>	No	-	-
top-label	Static label displayed above the input field. Unlike the floating label, this remains fixed	string	No	-	-

Events

Event name	Payload	Description
update:model-value	value?: number | undefined	Emitted when the input value change
click	value: Event	Emitted input is clicked
blur	value: Event	Emitted when the input is blurred
change	value: Event	Emitted when the value change
focus	value: Event	Emitted when the input is focused