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:

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

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
modelValue	@model The value of the input	union	-	undefined
currency	The currency to use	string	-	'EUR'
locale	The locale to use	string	-	'fr-FR'
min	The minimum value that the input can accept	number	-	0
max	The maximum value that the input can accept	number	-	Number.POSITIVE_INFINITY
noIcon	The input will be displayed without icon	boolean	-	false
block	The input will be displayed in full width	boolean	-

Events

Event name	Properties	Description
update:model-value
formatted

Slots

Name	Description	Bindings
left-icon