Form Currency

The locale attribute follows Intl.NumberFormat rules and defaults to en-US. Set it to any supported locale to change the 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);

<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="$$" />

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:

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

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

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.