InputMasked

Properties

Property	Type	Description
`as_number`	`boolean`	(optional) Set to `true` to automatically set a number mask based on the given or inherited locale.
`as_percent`	`boolean`	(optional) Set to `true` to automatically set a number mask with a percentage sign based on the given or inherited locale.
`as_currency`	`boolean`	(optional) Set to `true` to use `NOK` or give it a currency code e.g. `USD` to automatically set a currency mask based on the given or inherited locale.
`mask_options`	`object`	(optional) Use it to manipulate internal masks. You can use it instead of e.g. `number_mask` or `currency_mask`. All options are listed below.
`number_mask`	`boolean` `object`	(optional) Set to `true` to enable the default numbers formatting – or give an `object` containing the number mask properties. More details below. Can be a JSON string as well, containing the number mask properties. Is disabled by default.
`currency_mask`	`boolean` `object`	(optional) Set to `true` or set the valuta (currency_mask="kr") to enable a custom currency mask – or give an `object` containing the number mask properties. More details below. Can be a JSON string as well, containing the number mask properties. Is disabled by default. Defaults to `kr`.
`number_format`	`object`	(optional) Use an object with NumberFormat e.g. `{ omit_rounding: false }`.
`locale`	`string`	(optional) Define the locale to be used in the `as_number` or `as_currency` masked. It will be inherited from the Eufemia Provider if not given. Defaults to `nb-NO`.
`mask`	`RegExp` `function`	(optional) A mask can be defined both as a RegExp style of characters or a callback function. Example below.
`show_mask`	`boolean`	(optional) Show mask when input is empty and has no focus. Defaults to `false`.
`show_guide`	`boolean`	(optional) When `false` is given, it doesn't print out placeholder characters and only adds mask characters when the user reaches them as they're typing. Defaults to `true`.
`placeholder_char`	`string`	(optional) The placeholder character represents the fillable spot in the mask (e.g. `_`). Defaults to invisible space.
`keep_char_positions`	`boolean`	(optional) When `true`, adding or deleting characters will not affect the positions of existing characters. Defaults to `false`.
`Space`	`string` `object`	(optional) Spacing properties like `top` or `bottom` are supported.
`Input`	`Various`	(optional) All `Input` properties are supported.

Number mask properties

The number mask is used for all kinds of number based masks, like:

Locale based masks:

as_number
as_currency
as_percent

Static masks:

number_mask
currency_mask

You can mask_options to manipulate the options.

Defaults to Norwegian number format.

Properties	Description
`prefix`	(string): What to display before the amount. Defaults to an empty string.
`suffix`	(string): What to display after the amount. Defaults to an empty string.
`includeThousandsSeparator`	(boolean): Whether or not to separate thousands. Defaults to to `true`.
`thousandsSeparatorSymbol`	(string): Character with which to separate thousands. Defaults to `' '`.
`allowDecimal`	(boolean): Whether or not to allow the user to enter a fraction with the amount. Defaults to `false`.
`decimalSymbol`	(string): Character that will act as a decimal point. Defaults to `','`.
`decimalLimit`	(number): How many digits to allow after the decimal. Defaults to `2`.
`integerLimit`	(number): Limit the length of the integer number. Defaults to `null` for unlimited.
`requireDecimal`	(boolean): Whether or not to always include a decimal point and placeholder for decimal digits after the integer. Defaults to `false`.
`allowNegative`	(boolean): Whether or not to allow negative numbers. Defaults to `true`.
`disallowLeadingZeroes`	(boolean): Whether or not to allow leading zeroes. Defaults to `false`.

Custom number mask usage

The number mask is included and can be set with the number_mask property.


// 1. Use the desired configurations
const numberMask = {
  prefix: '',
  suffix: ',- kr'
}

// 2. Then pass 'numberMask' to the InputMasked component as the number_mask
<InputMasked number_mask={numberMask} ... />

But in case you have to create the mask by yourself, you can do so:

import createNumberMask from '@dnb/eufemia/components/input-masked/addons/createNumberMask'

// 1. Create the 'numberMask' with your desired configurations
const numberMask = createNumberMask({
  prefix: '',
  suffix: ',- kr'
})

// 2. Then pass 'numberMask' to the InputMasked component as the mask
<InputMasked mask={numberMask} ... />

Email mask

import emailMask from '@dnb/eufemia/components/input-masked/addons/emailMask'

render(
  <InputMasked
    label="Email:"
    mask={emailMask}
    placeholder="@."
    keep_placeholder={true}
  />,
)

Read more about other addons on the open-source project

Multi-input mask

Properties	Description
`label`	(optional)`legend` element describing the group of inputs inside the components.
`labelDirection`	(optional) Use to change the label layout direction. Defaults to `horizontal`.
`inputs`	array of MultiInputMaskInput that defines the inputs in the component. The id's defined here is used to map input value to correct property in `values` parameters used in `onChange`
`values`	(optional) values used for the inputs in the component. Expects an object with keys matching the id's defined in `inputs`
`delimiter`	(optional) character that separates the input inputs.
`stretch`	(optional) use `true` in order to stretch the input to the available space. Defaults to false.
`status`	(optional) text with a status message. The style defaults to an error message. You can use true to only get the status color, without a message.`.
`statusState`	(optional) defines the state of the status. Currently, there are two statuses [error, info]. Defaults to error.
`suffix`	(optional) Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.

MultiInputMask inputs properties

Properties	Description
`id`	(string) Defines input id. This id is also used to map the input value to the correct property on the objects used for `values` and `onChange` parameters.
`label`	(string) Label used by the input. The label itself is hidden, but required to uphold accessibility standards for screen readers.
`mask`	(array) Each RegExp item in the array defines what the mask should be for each subsequent character in the input. The array length sets the inputs size/character limit.
`placeholderCharacter`	(string) Sets the placeholder character used for the input.

#InputMasked

#Properties

#Number mask properties

#Custom number mask usage

#Email mask

#Multi-input mask

#MultiInputMask inputs properties