Currency inputs and required fields

[MOA-TI]

First off, thank you for the fantastic work you’re doing with Flux!

I was wondering if there are any plans to introduce a currency input feature with options for custom decimal and thousand separators, currency symbols, right-aligned numbers, and more.

Additionally, would it be possible to mark ‘required’ field labels? This would allow them to be styled more easily using CSS.

These improvements would greatly simplify the development of web applications focused on management.

[jeffchown]

Hi @MOA-TI As Flux uses Alpine under the hood, have you tried:

<div>
    <flux:input label="Money Input" x-mask:dynamic="$money($input)" />
</div>

The documentation is here https://alpinejs.dev/plugins/mask#money-inputs

[ju5t]

I was wondering if there are any plans to introduce a currency input feature with options for custom decimal and thousand separators, currency symbols, right-aligned numbers, and more.

We use AutoNumeric for this, it requires a bit more effort but gives more flexibility. I don't think this should be added to Flux though, you can add it to a flux:input field so it requires no additional styling.

Additionally, would it be possible to mark ‘required’ field labels? This would allow them to be styled more easily using CSS.

You can pass the required attribute to an input and use something like required:border-red-500.

[MOA-TI]

I was wondering if there are any plans to introduce a currency input feature with options for custom decimal and thousand separators, currency symbols, right-aligned numbers, and more.

We use AutoNumeric for this, it requires a bit more effort but gives more flexibility. I don't think this should be added to Flux though, you can add it to a flux:input field so it requires no additional styling.

Oh! I didn’t know about AutoNumeric.js! I’ll give it a try. Thanks for the heads up!!

Additionally, would it be possible to mark ‘required’ field labels? This would allow them to be styled more easily using CSS.

You can pass the required attribute to an input and use something like required:border-red-500.

I’ve tried it, but unfortunately, only the input field is marked as ‘required’; neither the container (ui-field) nor the label (ui-label) are marked. Because of this, it’s not possible to apply CSS to change the label color or add a red * next to the label for the required fields. If the container had a data-* attribute (like data-flux-required), it would be much easier to style the required fields with CSS.

[MOA-TI]

I was wondering if there are any plans to introduce a currency input feature with options for custom decimal and thousand separators, currency symbols, right-aligned numbers, and more.

We use AutoNumeric for this, it requires a bit more effort but gives more flexibility. I don't think this should be added to Flux though, you can add it to a flux:input field so it requires no additional styling.

This is the code for my currency component:

@props([
    'symbol' => '€',
])

<div x-data="{ value: @entangle($attributes->wire('model')), autonumeric: undefined }"
     x-init="
        autonumeric = new AutoNumeric($refs.currency, value, {
           currencySymbol: ' {{ $symbol }}',
           currencySymbolPlacement: 's',
           decimalCharacter: ',',
           digitGroupSeparator: '.',
           formatOnPageLoad: true,
       });"
     class="input-right">
    <flux:input
        x-ref="currency"
        x-on:blur="value = autonumeric.getNumber()"
        type="text"
        {{ $attributes->whereDoesntStartWith('wire:model') }}
        x-model="value"/>
</div>

The CSS attribute "input-right" forces right alignment:

.input-right input {
   @apply text-right;
}

The component seems to work, but it only applies the formatting when the control is focused. Do you know how I can make it apply the formatting by default?

Thanks a lot!!