Apply a simple mask to a String. You can customize the mask template and which Char to replace.

string { mask = "+1 ### ### ####", replace = '#' } "1234567890"
--> "+1 123 456 7890"

Remove a mask applied by string. This is often needed if you want to save just the value, and not the formatted/masked String.

remove { mask = "+1 ### ### ####", replace = '#' } "+1 123 456 7890"
--> "1234567890"


remove { mask = "+1 ### ### ####", replace = '#' } "1234567890"
-->"1234567890"

When formatting with float and floatString, it can be useful to either use exactly an amount of decimal digits, or just to limit it to a certain amount.

Mask a float to have a certain amount of DecimalDigits.

float (Precisely 2) { decimalSeparator = ".", thousandsSeparator = "" } 1234
--> "1234.00"


float (Precisely 2) { decimalSeparator = ",", thousandsSeparator = " " } 1234.5
--> "1 234,50"


float (Precisely 2) { decimalSeparator = ",", thousandsSeparator = "" } 123.4567
--> "123,45"


float (AtMost 2) { decimalSeparator = ".", thousandsSeparator = "," } 123
--> "123"


float (AtMost 2) { decimalSeparator = ".", thousandsSeparator = "," } 123.4
--> "123.4"


float (AtMost 2) { decimalSeparator = ".", thousandsSeparator = "," } 123.4567
--> "123.45"

Mask a float to have a certain amount of DecimalDigits, but using a String as an input. This is useful for input fields, where the onInput event returns a String that can be run through floatString. In case the input String is not a valid Float, this function returns Nothing, and an empty String is automatically converted to 0.

floatString (Precisely 2) { decimalSeparator = ",", thousandsSeparator = " " } "1234.5"
--> Just "1 234,50"


floatString (Precisely 2) { decimalSeparator = ".", thousandsSeparator = "," } "12a.4"
--> Nothing


floatString (Precisely 2) { decimalSeparator = ",", thousandsSeparator = "." } ""
--> Just "0,00"

Usually you'll want to use this function in your update like this:

update msg model =
    case msg of
        EnteredPrice price ->
            { model
                | price =
                    price
                        |> Mask.floatString (Mask.Precisely 2)
                        |> Maybe.withDefault model.price
            }

Remove a mask applied by float or floatString

removeFloat { decimalSeparator = ",", thousandsSeparator = " " } "1 234,56"
--> "1234.56"

A default value you can use for float and floatString.

Update a masked value you store in your Model. This is useful to provide a better UX when using masked input fields. For more details, check out this example on GitHub or in this Ellie link, which uses a custom element to make it even better!