Form Currency

You should use the locale attribute to matches the logic of Intl.NumberFormat . By default, the value assigned to the locale attribute is en-US , but you can use any other value supported by Intl.NumberFormat to format the input in the desired currency format.

<!-- Default -->
<x-currency locale="en-US" />
 
<x-currency locale="pt-BR" />
 
<x-currency locale="es-ES" />

The component was built with two attributes that are intended to manipulate the JavaScript Intl.NumberFormat , called decimals and precision . You can use them to manipulate the JavaScript Intl.NumberFormat :

// <x-currency decimals="2" precision="4" />  
 
new Intl.NumberFormat(this.locale, {
    minimumFractionDigits: decimals, 
    maximumFractionDigits: precision,
}).format(number);

You can display symbols related to each supported currency through TallStackUI's translation system. You can control which symbol will be displayed via arguments.

<x-currency label="Only symbol" symbol />
 
<x-currency label="Only currency code" currency />
 
<x-currency label="Both" symbol currency />

The symbols are not based on the locale attribute, but rather on your app's app.locale configuration. This is because you may want to display a currency for currencies other than your app's app.locale . If you want to replace the symbols at runtime, you can set a string value on it:

<x-currency symbol="$$" />
 
<x-currency currency="$$" />

When bound to a Livewire property, the currency component offers three modes for sending the value to the server. Pick the one that matches how the value is persisted on the backend.

Without mutate or decimal , the component sends a digits-only string to the Livewire property. With decimals="2" , typing 1000 displays 10.00 but the property receives "1000" . This is ideal when monetary values are stored as integer cents.

<x-currency wire:model="price" />

With the mutate attribute, the component sends the formatted string exactly as it appears in the input, group separator and decimal separator included. Use it when you want to persist the user-facing representation verbatim (e.g., a free-text display label).

<x-currency mutate wire:model="price" />

The decimal attribute strips the locale's group separator and normalizes the decimal separator to . , regardless of locale. The resulting string is directly castable via (float) / (int) or by Eloquent decimal:N / float casts.

<x-currency decimal wire:model="price" />

A typical use case is binding to a column with an Eloquent decimal:2 cast, the value arrives at the property ready for assignment, no manual parsing required:

// app/Models/Product.php
 
// ...
 
protected $casts = [
    'price' => 'decimal:2', 
];

<x-currency decimal wire:model="product.price" />

If most components in your application need the same sync mode, set it once in the configuration file to avoid repeating the prop on every usage.

// ...
 
'currency' => [
    Components\Form\Currency\Component::class,
    /*
    |----------------------------------------------------------------------
    | Currency Global Settings
    |----------------------------------------------------------------------
    |
    | mutate: when true, every currency component defaults to sending the
    | formatted display string (e.g. "2,000.00") to the Livewire property.
    | decimal: when true, every currency component defaults to sending the
    | parsed decimal string (e.g. "2000.00") to the Livewire property.
    | The two are mutually exclusive — setting both raises a validation
    | exception at render time.
    */
    [
        'mutate' => false,
        'decimal' => false, //  every <x-currency /> defaults to decimal mode
    ],
],

The currency component can be used entirely out of the Livewire context. For this type of situation, the value to be formatted should be sent to the currency component using the value attribute, but with the value as a string. The value will be returned to the controller formatted as a string when the form is submitted.