---
title: "MazInputNumber"
description: "MazInputNumber is a number input component with increment and decrement buttons for user-friendly input. Customizable size, disabled state, and limit values."
package: "maz-ui"
url: "https://maz-ui.com/components/maz-input-number"
---

# MazInputNumber

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

- Package: `maz-ui`
- Import: `import MazInputNumber from 'maz-ui/components/MazInputNumber'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-input-number

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

## Basic usage

```vue
<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`

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

## MazInputNumber API

`import MazInputNumber from 'maz-ui/components/MazInputNumber'`

### Props

- `id` (`string`): The id of the input.
- `model-value` (`number`, `v-model`): The value of the component (v-model).
- `disabled` (`boolean`, default: `false`): Whether the input number is disabled or not.
- `max` (`number`, default: `Number.POSITIVE_INFINITY`): The maximum value allowed for the input number.
- `min` (`number`, default: `Number.NEGATIVE_INFINITY`): The minimum value allowed for the input number.
- `step` (`number`, default: `1`): The step value for incrementing or decrementing the input number.
- `size` (`"xs" | "sm" | "md" | "lg" | "xl" | "mini"`, default: `'md'`): The size of the input number component.
- `hide-buttons` (`boolean`, default: `false`): Whether to hide the increment and decrement buttons or not.
- `text-center` (`boolean`, default: `true`): Whether to center the text inside the input or not.
- `inputmode` (`"none" | "text" | "search" | "url" | "email" | "tel" | "numeric" | "decimal"`, default: `"numeric"`): The inputmode attribute for the input.
- `block` (`boolean`): The input will be displayed in full width.
- `error` (`boolean`, default: `false`): Will display the input in error state.
- `hint` (`string`): The hint text to display below the input.
- `success` (`boolean`, default: `false`): Will display the input in success state.
- `warning` (`boolean`, default: `false`): Will display the input in warning state.
- `input-props` (`MazInputProps<MazInputValue>`): The props for the input component.
- `top-label` (`string`): Static label displayed above the input field. Unlike the floating label, this remains fixed.

### Events

- `@update:model-value` (payload: `value?: number | undefined`): Emitted when the input value change
- `@click` (payload: `value: Event`): Emitted input is clicked
- `@blur` (payload: `value: Event`): Emitted when the input is blurred
- `@change` (payload: `value: Event`): Emitted when the value change
- `@focus` (payload: `value: Event`): Emitted when the input is focused