Skip to content
Home

InputMasked

Info
Demos
Properties
Events

Demos

Locale based numbers

When you use as_number or as_percent (and as_currency see below) it will create a mask for you and inherit the locale from the Eufemia Provider, if the locale prop is not given.

You can still define extra mask parameters with number_mask or mask_options, as the second input example shows (e.g. decimalLimit).

Code Editor
<Provider
  formElement={{
    label_direction: 'vertical',
  }}
>
  <Flex.Vertical>
    <InputMasked
      label="Number"
      as_number
      mask_options={{
        allowNegative: false,
      }}
      value="1234.50"
      on_change={({ numberValue }) => {
        console.log(numberValue)
      }}
    />
    <InputMasked
      label="Number (decimal limit)"
      as_number
      number_mask={{
        decimalLimit: 2,
      }}
      value="1234.016"
      on_change={({ numberValue }) => {
        console.log(numberValue)
      }}
    />
    <InputMasked
      label="Percentage"
      as_percent
      number_mask={{
        decimalLimit: 1,
      }}
      value="1234.016"
      on_change={({ numberValue }) => {
        console.log(numberValue)
      }}
    />
  </Flex.Vertical>
</Provider>

Locale based as_currency

When you use as_currency it will create a mask for you and inherit the locale from the Eufemia Provider, if the locale prop is not given.

Code Editor
<Provider
  formElement={{
    label_direction: 'vertical',
  }}
>
  <Flex.Vertical>
    <InputMasked
      label="Currency"
      as_currency="EUR"
      value="1234.50"
      on_change={({ numberValue }) => {
        console.log(numberValue)
      }}
    />
    <Provider
      locale="en-GB"
      InputMasked={{
        currency_mask: {
          decimalLimit: 3,
        },
      }}
    >
      <InputMasked
        label="Currency"
        as_currency="USD"
        value="1234.567"
        on_change={({ numberValue }) => {
          console.log(numberValue)
        }}
      />
    </Provider>
  </Flex.Vertical>
</Provider>

Define the currency_mask manually

Code Editor
<Provider
  formElement={{
    label_direction: 'vertical',
  }}
>
  <Flex.Vertical>
    <InputMasked
      label="Left aligned (default)"
      show_mask
      currency_mask="kr"
      on_change={({ numberValue }) => {
        console.log(numberValue)
      }}
    />
    <InputMasked
      label="Right aligned"
      show_mask
      currency_mask={{
        currency: 'NOK',
      }}
      align="right"
      on_change={({ numberValue }) => {
        console.log(numberValue)
      }}
    />
  </Flex.Vertical>
</Provider>

Customize the number mask

Code Editor
<InputMasked
  label="Masked amount"
  show_mask
  number_mask={{
    suffix: ' kr',
    allowDecimal: true,
  }}
  placeholder_char={null}
  on_change={({ numberValue }) => {
    console.log(numberValue)
  }}
/>

Using the number_mask with a combined suffix

kr
Code Editor
<InputMasked
  label="Masked input"
  value="1000000"
  number_mask={{
    suffix: ',-',
    allowDecimal: false,
  }}
  suffix="kr"
  on_change={({ numberValue }) => {
    console.log(parseInt(numberValue || 0, 10))
  }}
/>

Using the number_mask and a prefix

Code Editor
<InputMasked
  label="Masked input"
  number_mask={{
    prefix: 'NOK ',
  }}
  stretch={true}
  placeholder="Enter a number"
  on_change={({ numberValue }) => {
    console.log(numberValue)
  }}
/>

Custom mask

This is an example of how you can utilize a custom mask.

For a phone number input, use the PhoneNumber field instead.

Code Editor
<InputMasked
  label="Custom mask"
  mask={[
    '0',
    '0',
    /[4]/,
    // have to start with 4
    /[5-7]/,
    // can be 5,6 or 7
    ' ',
    /[49]/,
    // have to start with 4 or 9
    /\d/,
    ' ',
    /\d/,
    /\d/,
    ' ',
    /\d/,
    /\d/,
    ' ',
    /\d/,
    /\d/,
  ]}
  show_mask
  placeholder_char="_"
  keep_char_positions
  on_change={({ numberValue }) => {
    console.log(numberValue)
  }}
/>

Mask with multiple inputs

Allows for the same input functionality as in the DatePicker, but with your own defined inputs. onChange takes an object with keys based on the step id's. e.g. {month: string, year: string, suffix: string}

import as demonstrated below

import { MultiInputMask } from '@dnb/eufemia/components/input-masked'
render(<MultiInputMask />)
Date
Code Editor
<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]/],
    },
  ]}
/>