Currency Input

Currency input with selectable currency code and formatting (thousand separators, fixed decimals, symbol/code display).

Basic Usage

Input Currenct

PHP

<template>
  <spr-input-currency id="input-currency-basic" v-model="inputModel" label="Input Currenct" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

Active State

Input Currenct

PHP

<template>
  <spr-input-currency id="input-currency-active-state" v-model="inputModel" label="Input Currenct" active />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

Error State

Input Currenct

PHP

<template>
  <spr-input-currency id="input-currency-error-state" v-model="inputModel" label="Input Currenct" error>
    <template #icon>
      <Icon icon="ph:warning-circle-fill" />
    </template>
  </spr-input-currency>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

Disabled State

Input Currenct

PHP

<template>
  <spr-input-currency id="input-currency-disabled-state" v-model="inputModel" label="Input Currenct" disabled />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

Disabled Country Currency

Input Currenct

PHP

<template>
  <spr-input-currency
    id="input-currency-disabled-country-currency"
    v-model="inputModel"
    label="Input Currenct"
    disabled-country-currency
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

Use Currency Code or Symbol

The default of the currency component is to display the currency code (e.g., USD, EUR). You can switch to display the currency symbol (e.g., $, €) by setting the :display-as-code prop to false.

Input Currenct

PHP

Input Currenct

₱

<template>
  <spr-input-currency
    id="input-currency-code-or-symbol-1"
    v-model="inputModel"
    label="Input Currenct"
    :display-as-code="true"
  />

  <spr-input-currency
    id="input-currency-code-or-symbol-2"
    v-model="inputModel"
    label="Input Currenct"
    :display-as-code="false"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

Get Selected Currency Meta

Input Currenct

PHP

Model Output:

Selected Currency:

Selected Symbol:

Raw Value:

<template>
  <spr-input-currency
    id="input-currency-selected-currency"
    v-model="inputModel"
    label="Input Currenct"
    @get-selected-currency-meta="handleSelectedCurrencyMeta"
  />

  <div class="spr-bg-blue-100 spr-p-4">
    <p>Model Output: {{ inputModel }}</p>
    <p>Selected Currency: {{ selectedCurrency }}</p>
    <p>Selected Symbol: {{ selectedSymbol }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
const selectedCurrency = ref('');
const selectedSymbol = ref('');

const handleSelectedCurrencyMeta = (val: { currency: string; symbol: string }) => {
  selectedCurrency.value = val.currency;
  selectedSymbol.value = val.symbol;
};
</script>

Pre-Selected Currency

Input Currenct

USD

<template>
  <spr-input-currency v-model="inputModel" label="Input Currenct" pre-selected-currency="USD" />
</template>

API Reference

Name	Description	Type	Default
id	The unique id for the component.	String	''
v-model	The raw (possibly unformatted while typing) currency string value.	String	''
placeholder	Placeholder text displayed when the input is empty.	String	'0.00'
pre-selected-currency	Initial ISO 4217 currency code (e.g., USD, EUR). Determines initial selector value.	String	'PHP'
disabled	Disables the entire currency input (including currency selector).	Boolean	false
disabled-country-currency	Disables only the currency selector while keeping the text field interactive.	Boolean	false
auto-format	Automatically applies thousand separators (and limits decimals) on blur and while typing (where valid).	Boolean	false
max-decimals	Maximum number of fractional digits preserved when formatting.	Number	2
min-decimals	Minimum number of fractional digits (currently not padded automatically if you removed padding logic).	Number	2
display-as-code	When true shows currency code (e.g., USD); when false shows symbol (or code if symbol ambiguous).	Boolean	true

For additional shared props, events, slots, and behavior inherited from the base input component, please refer to the Input Component API Reference.

Events

Event	Payload	Description
@update:model-value	String	Emitted whenever the bound input value changes (two-way binding).
@get-selected-currency-meta	{ currency: String; symbol: String; numericValue: Number | null; rawValue: String | null }	Emitted after selecting a currency and on blur. Includes code, symbol (or code if ambiguous), numericValue (parsed float) and rawValue (canonical unformatted string).
@get-currency-errors	Array<{ title: String; message: String }>	Validation or parsing errors encountered during input normalization.
@get-numeric-value	Number	Parsed numeric value (group separators stripped) emitted on mount (if initial value) and blur.