---
title: "MazInputPrice"
description: "MazInputPrice is a standalone component that replaces the standard html input text and formats the text enter according to the currency provided"
package: "maz-ui"
url: "https://maz-ui.com/components/maz-input-price"
---

# MazInputPrice

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

- Package: `maz-ui`
- Import: `import MazInputPrice from 'maz-ui/components/MazInputPrice'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-input-price

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

## Basic usage

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

## MazInputPrice API

`import MazInputPrice from 'maz-ui/components/MazInputPrice'`

### Props

- `model-value` (`number`, `v-model`): The value of the input.
- `currency` (`string`, default: `"EUR"`): The currency to use.
- `locale` (`string`, default: `"fr-FR"`): The locale to use.
- `min` (`number`, default: `Number.NEGATIVE_INFINITY`): The minimum value that the input can accept.
- `max` (`number`, default: `Number.POSITIVE_INFINITY`): The maximum value that the input can accept.
- `no-icon` (`boolean`, default: `false`): The input will be displayed without icon.
- `block` (`boolean`): The input will be displayed in full width.
- `error` (`boolean`): Will display the input in error state.
- `hint` (`string`): The hint text to display below the input.
- `success` (`boolean`): Will display the input in success state.
- `warning` (`boolean`): Will display the input in warning state.
- `currency-options` (`Omit<FilterCurrencyOptions, "currency">`): Options for the currency helper - [see](https://maz-ui.com/ecosystem/utils/currency.md).

### Events

- `@update:model-value` (payload: `value: number | undefined`)
- `@blur` (payload: `value: Event`)
- `@focus` (payload: `value: Event`)
- `@input` (payload: `value: number | undefined`)
- `@formatted` (payload: `value: string | undefined`)