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
<FormRow vertical>
  <InputMasked
    label="Number:"
    as_number
    mask_options={{
      allowNegative: false,
    }}
    value="1234.50"
    right
    bottom
    on_change={({ numberValue }) => {
      console.log(numberValue)
    }}
  />
  <InputMasked
    label="Number (decimal limit):"
    as_number
    number_mask={{
      decimalLimit: 2,
    }}
    value="1234.016"
    right
    bottom
    on_change={({ numberValue }) => {
      console.log(numberValue)
    }}
  />
  <InputMasked
    label="Percentage:"
    as_percent
    number_mask={{
      decimalLimit: 1,
    }}
    value="1234.016"
    right
    bottom
    on_change={({ numberValue }) => {
      console.log(numberValue)
    }}
  />
</FormRow>

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
<FormRow vertical>
  <InputMasked
    label="Currency:"
    as_currency="EUR"
    value="1234.50"
    on_change={({ numberValue }) => {
      console.log(numberValue)
    }}
    right
    bottom
  />
  <Provider
    locale="en-GB"
    InputMasked={{
      currency_mask: {
        decimalLimit: 3,
      },
    }}
  >
    <InputMasked
      label="Currency:"
      as_currency="USD"
      value="1234.567"
      on_change={({ numberValue }) => {
        console.log(numberValue)
      }}
      right
      bottom
    />
  </Provider>
</FormRow>

Define the currency_mask manually

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

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)
  }}
/>

Phone Number, starting with 4

Code Editor
<InputMasked
  label="Masked input:"
  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)
  }}
/>