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