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	number	-	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	-	Number.NEGATIVE_INFINITY
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	-
error	Will display the input in error state.	boolean	-
hint	The hint text to display below the input.	string	-
success	Will display the input in success state.	boolean	-
warning	Will display the input in warning state.	boolean	-
currencyOptions	Options for the currency helper - see	Omit	-

Events

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

Slots

Name	Description	Bindings
left-icon