Skip to content
Home

InputMasked

Info
Demos
Properties
Events

Demos

Locale based numbers

When you use asNumber or asPercent (and asCurrency see below) it will create a mask for you and inherit the locale from the Eufemia Provider, if the locale property is not given.

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

Code Editor
<Provider
  formElement={{
    labelDirection: 'vertical',
  }}
>
  <Flex.Vertical>
    <InputMasked
      label="Number"
      asNumber
      maskOptions={{
        allowNegative: false,
      }}
      value="1234.50"
      onChange={({ numberValue }) => {
        console.log(numberValue)
      }}
    />
    <InputMasked
      label="Number (decimal limit)"
      asNumber
      numberMask={{
        decimalLimit: 2,
      }}
      value="1234.016"
      onChange={({ numberValue }) => {
        console.log(numberValue)
      }}
    />
    <InputMasked
      label="Percentage"
      asPercent
      numberMask={{
        decimalLimit: 1,
      }}
      value="1234.016"
      onChange={({ numberValue }) => {
        console.log(numberValue)
      }}
    />
  </Flex.Vertical>
</Provider>

Locale based asCurrency

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

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

Define the currencyMask manually

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

Customize the number mask

Code Editor
<InputMasked
  label="Masked amount"
  showMask
  numberMask={{
    suffix: ' kr',
    allowDecimal: true,
  }}
  onChange={({ numberValue }) => {
    console.log(numberValue)
  }}
/>

Using the numberMask with a combined suffix

kr
Code Editor
<InputMasked
  label="Masked input"
  value="1000000"
  numberMask={{
    suffix: ',-',
    allowDecimal: false,
  }}
  suffix="kr"
  onChange={({ numberValue }) => {
    console.log(numberValue)
  }}
/>

Using the numberMask and a prefix

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