Playground

Turn the options and watch it change. The code below changes with it, in whichever framework you are using — copy it and you have what is on the screen.

Live

Currency The dinar has three decimals; the yen has none.

Locale

Typing 'cents' fills from the right, like a card terminal.

Show Currency

Grouping

Allow Negative

Accounting Negatives as (1,234.56).

import { createAmountInput } from '@devix-labs/amount-input';
import '@devix-labs/amount-input/styles.css';

createAmountInput(document.querySelector('#target'), {
  value: '1234.56',
  currency: 'AED',
  locale: 'en-AE',
  typing: 'free',
  showCurrency: false,
  grouping: true,
  allowNegative: false,
  accounting: false
});

import { AmountInput } from '@devix-labs/amount-input/react';
import '@devix-labs/amount-input/styles.css';

<AmountInput
  value="1234.56"
  currency="AED"
  locale="en-AE"
  typing="free"
  grouping
/>

<script setup>
import { AmountInput } from '@devix-labs/amount-input/vue';
import '@devix-labs/amount-input/styles.css';
</script>

<template>
  <AmountInput
  value="1234.56"
  currency="AED"
  locale="en-AE"
  typing="free"
  grouping
/>
</template>

<script>
  import { amountInput } from '@devix-labs/amount-input/svelte';
  import '@devix-labs/amount-input/styles.css';
</script>

<div use:amountInput={{
  value: '1234.56',
  currency: 'AED',
  locale: 'en-AE',
  typing: 'free',
  showCurrency: false,
  grouping: true,
  allowNegative: false,
  accounting: false
}} />

Every option here is in the documentation, along with the ones that are not worth a control.