,.

Alpine JS Number Plugin

Enhanced Numeric Input for Alpine.js: Simplifying Number Formatting and Currency Handling.

Installation

With a CDN

 <script
   defer
   src="https://unpkg.com/alpinejs-number@latest/dist/number.min.js"
 ></script>

 <script
   defer 
   src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js">
 </script>

With a Package Manager

 yarn add -D alpinejs-number

 npm install -D alpinejs-number
 import Alpine from 'alpinejs'
 import number from 'alpinejs-number'

 Alpine.plugin(number)

 Alpine.start()

Basic Usage

Use x-number directive on an input to auto format the number.

<input x-number />

Precision

Precision can be set with a with a number modifier.

<input x-number.4 />

Prefix

The expression between quotes is the prefix.

Note: numbers, minus and decimal point cannot be used in the prefix.

<input x-number="$" />

Override Thousands Separator and Decimal Point

The thousands separator and the decimal point can be specified in the string between quotes. Simply separate the strings with a vertical bar. The first string is the prefix, the second is the thousands separator, and the third is the decimal point.

<input x-number="€|.|," />

Suffix

A suffix can be specified within the quotes too. It is the fourth string in the list.

<input x-number.0="|,|.|¢" />

A suffix can also be added with a string after a colon.

Note: special characters and uppercase characters cannot be used here.

<input x-number:x />

Unsigned

Use the unsigned modifier to disable negative numbers.

<input x-number.unsigned />

Try typing a negative number into this box.

To Number Magic

$toNumber magic can be used to convert a number string to a number.

<div x-text="$toNumber('$1,234.99')"></div>

Output:

A second argument can be used to pass the decimal character.

<div x-text="$toNumber('€1.234,99', ',')"></div>

Output:

To Formatted Magic

$toFormatted magic can be used to convert a number to a formatted number string.

<div x-text="$toFormatted('1234000.99')"></div>

Output:

The prefix, thousands separator, decimal character, precision and suffix can be passed as arguments to the function.

<div x-text="$toFormatted('1234.9999', '$', ',', '.', ' USD', 2)"></div>

Output:

Form Example

Alpine JS along with the magics can be utilized to transform inputs to numbers before submitting a form.

<div x-data="{ amount: 10000, formData: {} }" class="space-y-4">

  <form @submit.prevent="formData = { amount: $toNumber(amount) }">
    <label for="form-example" class="mr-2">Amount:</label>
    <input
      x-number.unsigned="$"
      id="form-example"
      class="border rounded px-2 py-1 text-right w-32"
      x-model="amount"
      required
    />
    <button type="submit" class="border rounded px-2 py-1">Submit</button>
  </form>

  <pre
    x-text="JSON.stringify(formData)"
    class="bg-gray-100 p-4 rounded-lg"
  ></pre>

</div>