MazInputPrice

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

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

Basic usage

Enter your price

priceValue: 2

formattedPrice:

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

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

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

Tips

TIP

This component use MazInput, so it inherits all his props

Props

Name	Description	Type	Required	Default
model-value	v-model	number	No	undefined
currency	The currency to use	string	No	'EUR'
locale	The locale to use	string	No	'fr-FR'
min	The minimum value that the input can accept	number	No	Number.NEGATIVE_INFINITY
max	The maximum value that the input can accept	number	No	Number.POSITIVE_INFINITY
no-icon	The input will be displayed without icon	boolean	No	false
block	The input will be displayed in full width	boolean	No	undefined
error	Will display the input in error state.	boolean	No	undefined
hint	The hint text to display below the input.	string	No	undefined
success	Will display the input in success state.	boolean	No	undefined
warning	Will display the input in warning state.	boolean	No	undefined
currency-options	Options for the currency helper - see	Omit	No	undefined

Events

Event name	Properties	Description
update:model-value
input
formatted
blur
focus