Skip to content
Home

InputMasked

Info
Demos
Properties
Events

Properties

PropertiesDescription
as_number(optional) Set to true to automatically set a number mask based on the given or inherited locale.
as_percent(optional) Set to true to automatically set a number mask with a percentage sign based on the given or inherited locale.
as_currency(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(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(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(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(optional) Use an object with NumberFormat e.g. { omit_rounding: false }.
locale(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(optional) A mask can be defined both as a RegExp style of characters or a callback function. Example below.
show_mask(optional) Show mask when input is empty and has no focus. Defaults to false.
show_guide(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(optional) The placeholder character represents the fillable spot in the mask (e.g. _). Defaults to invisible space.
keep_char_positions(optional) When true, adding or deleting characters will not affect the positions of existing characters. Defaults to false.
Input(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.

PropertiesDescription
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

PropertiesDescription
label(optional)legend element describing the group of inputs inside the components.
labelDirection(optional) Use to change the label layout direction. Defaults to horizontal.
inputsarray 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.
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.

MultiInputMask inputs properties

PropertiesDescription
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.