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	Possible values
model-value	v-model The value of the input	number	No	-	-
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	-	-
error	Will display the input in error state.	boolean	No	-	-
hint	The hint text to display below the input.	string	No	-	-
success	Will display the input in success state.	boolean	No	-	-
warning	Will display the input in warning state.	boolean	No	-	-
currency-options	Options for the currency helper - see	Omit<FilterCurrencyOptions, "currency">	No	-	-

Events

Event name	Payload	Description
update:model-value	value: number | undefined
blur	value: Event
focus	value: Event
input	value: number | undefined
formatted	value: string | undefined