Skip to content

MazInputPrice

MazInputPrice is a standalone component that replaces the standard html input text and formats the text enter according to the currency provided

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

Enter your price

priceValue: 2

formattedPrice:

vue
<template>
  <MazInputPrice
    v-model="priceValue"
    label="Enter your price"
    currency="USD"
    locale="en-US"
    :min="5"
    :max="1000"
    @formatted="formattedPrice = $event"
  />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import MazInputPrice from 'maz-ui/components/MazInputPrice'

  const priceValue = ref(2)
  const formattedPrice = ref()
</script>