#InputMasked

#Import

import { InputMasked } from '@dnb/eufemia'

#Description

The InputMasked component uses the basic Input component, but with some additional masking functionality.

#Relevant links

• Source code
• Docs code

#How it works

This component uses the basic Input component with a set of additional options and features.

You can either create your own mask or use one of the provided ones. There are also masks that change based on different locales (as_currency or as_number).

#Accessibility

Screen readers will also read the mask before the user enters the content. Additionally, the user will hear the mask during typing. This behavior can have both positive and negative side effects for the user, but overall, it works well.

Both entering a comma or a dot will act as a decimal separator if decimals are enabled and one of the internal masks for numbers is used.

#InputMode

NB: Please do not set inputMode="numeric" or inputMode="decimal" because devices may or may not show a minus key (-)!

The InputMasked component handles soft keyboards (iOS and Android) by using either inputMode="numeric" or inputMode="decimal", depending on allowNegative and allowDecimal (getSoftKeyboardAttributes).

For iOS it additionally sets type="number" during focus (InputModeNumber). This way the correct numeric soft keyboard is shown.

<InputMasked
  mask_options={{
    allowNegative: false,
  }}
/>

#Mask based on locale

The InputMasked component supports masks based on a given locale. The locale will be inherited from the Eufemia Provider if not specified.

You can enable these masks by setting:

• as_currency="EUR"
• as_number={true}

You can still provide custom mask parameters to currency_mask={{ ... }} or number_mask={{ ... }}. Alternatively, you can use mask_options={{ ... }} and provide your extra options there.

More details in the examples above.

#Clean number values

If you use as_currency or as_number, you must always provide a clean number without any mask (value="1234.50"):

<InputMasked as_currency="EUR" value="1234.50" />

You can also receive a clean number value you can use and send back in again:

<InputMasked
  as_currency="EUR"
  value="1234.50"
  on_change={({ numberValue }) => {
    console.log(numberValue) // type of float
  }}
/>

#Decimals

• number_mask will default to no decimals
• currency_mask will default to no decimals
• as_number will default to no decimals
• as_currency will default to 2 decimals

You can change the number of decimals by sending in options to the currency_mask, number_mask, or mask_options (see example above).

This example here also shows how to affect every InputMasked component in your application, by setting these options on the Eufemia Provider.

<Provider
  locale="en-GB"
  InputMasked={{
    currency_mask: {
      decimalLimit: 1, // defaults to 2
    },
  }}
>
  <InputMasked as_currency="USD" value="1234.567" />
</Provider>

<Provider
  locale="en-GB"
  InputMasked={{
    number_mask: {
      decimalLimit: 2, // defaults to no decimals
    },
  }}
>
  <InputMasked as_number value="1234.567" />
</Provider>

To remove a decimal limit, you can provide null and allow decimals with allowDecimal:

<InputMasked
  as_number
  mask_options={{
    allowDecimal: true,
    decimalLimit: null,
  }}
  value="1234.567"
/>

#Mask with multiple inputs

Provides the same input functionality as the DatePicker, but with your own defined inputs. onChange takes an object with keys based on the step IDs, e.g., {month: string, year: string, suffix: string}.

Import as demonstrated below:

import { MultiInputMask } from '@dnb/eufemia/components/input-masked'
render(<MultiInputMask />)

<MultiInputMask
  label="Date"
  delimiter="/"
  onChange={({ month, year, suffix }) =>
    console.log({
      month,
      year,
      suffix,
    })
  }
  inputs={[
    {
      id: 'month',
      label: 'the month',
      placeholderCharacter: 'd',
      mask: [/[0-9]/, /[0-9]/],
    },
    {
      id: 'year',
      label: 'the year',
      placeholderCharacter: 'm',
      mask: [/[0-9]/, /[0-9]/],
    },
    {
      id: 'suffix',
      label: 'suffix text',
      placeholderCharacter: '-',
      mask: [/[a-zA-Z]/, /[a-zA-Z]/, /[a-zA-Z]/],
    },
  ]}
/>