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

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

<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

<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

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

<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

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

  }}

/>