Alpine JS Number

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

Documentation

Install

$3

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


`

$3

`shell
yarn add -D alpinejs-number

npm install -D alpinejs-number
`

`js
import Alpine from "alpinejs";
import number from "alpinejs-number";

Alpine.plugin(number);

Alpine.start();
`

Examples

$3

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

`js

`

$3

Precision can be set with a with a number modifier.

`js

`

$3

The expression between quotes is the prefix.
Note: numbers, minus and decimal point cannot be used in the prefix.

`js

`

$3

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.

`js

`

$3

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

`js

`

A suffix can also be added with a string after a colon.
Note: special characters and uppercase characters cannot be used here.

`js

`

$3

Use the unsigned modifier to disable negative numbers.

`js

`

$3

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

$3

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

`js



`

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

`js



`

$3

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

`js


``