Input mask

[sbc640964]

How can I apply an input mask with the nextui input?

[abeskazali]

Could you let me know if you fixed your problem? I'm searching for the same situation.

[rydonahue1]

Bumping this thread as I am looking for similar and input mask don't appear to be available in the NextUi api

[jvsdurso]

I suggest you to implement your own mask using OnChange property. Sometimes you can use OnBlur.

[thulioxavier]

using something like this worked for me:

lib: https://www.npmjs.com/package/react-input-mask

<ReactInputMask
            mask="999.999.999-99"
            maskChar="_"
            value={cpf}
            onChange={(e) => setCpf(e.target.value)}
          >
            {(inputProps: InputProps) => (
              <Input
                {...inputProps}
                type="text"
                label="CPF"
                labelPlacement="outside"
                variant="flat"
                placeholder="Informe o CPF do cliente"
                size="lg"
                radius="sm"
              />
            )}
          </ReactInputMask>

[xJDvm]

This worked for me

import React from 'react';
import { NumericFormat } from 'react-number-format';
import { Input } from '@nextui-org/react';

const CurrencyInput = ({ amount, setAmount, isDisabled, fieldVariant }) => {
    const handleChangeAmount = (values) => {
        const { value } = values;
        setAmount(value);
    };

    return (
        <NumericFormat
            value={amount}
            thousandSeparator="."
            decimalSeparator=","
            decimalScale={2}
            fixedDecimalScale={true}
            allowNegative={false}
            onValueChange={handleChangeAmount}
            placeholder="Monto"
            customInput={Input} // Personalized input Component
            aria-label="input-monto"
            size="lg"
            isDisabled={isDisabled}
            variant={fieldVariant}
        />
    );
};

export default CurrencyInput;