Form Currency
Form currency component.
Form Currency, Personalization Blocks
Example:
TallStackUi::personalize() ->form('currency') ->block('block', 'classes');The currency component is a component designed for displaying and formatting
currency values. Behind the scenes the currency component is an adaptation of
the Input component with usage of native JavaScript's Intl.NumberFormat
<x-currency /><x-currency label="Salady Expectation" hint="Between 5,000 and 10,000 USD" /><x-currency clearable />
The currency component has a locale
attribute that 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 currency 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);The currency component supports displaying 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="$$" />
There are a few important things to note about the currency component. The first is that the 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.
When the component is used inside the Livewire context, however, the value can be sent in different
formats (float, int, string), but the value returned by default will not be formatted. To format the
value when emitting it to the Livewire, you must use the mutate
attribute, which
instructs the currency component to format the value before binding it to the Livewire property.
<x-currency mutate />