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

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