BenixBenix DSv1.1.0

MaskedInput

Input with built-in masks for Brazilian documents and phones. Formats as you type.

Examples

All masks with labels

<MaskedInput
  label="CPF"
  mask="CPF"
  value={cpf}
  onChange={(e) => setCpf(e.target.value)}
  placeholder="000.000.000-00"
/>

Custom mask (any template)

Use `9` as the digit placeholder. Other characters are inserted literally.

import { useState } from 'react';
import { MaskedInput } from '@kactostecnologia/benix-ds';


export default function CustomMaskForm() {
  const [card, setCard] = useState('');
  const [time, setTime] = useState('');


  return (
    <>
      <MaskedInput
        label="Credit card"
        mask="9999 9999 9999 9999"
        value={card}
        onChange={(e) => setCard(e.target.value)}
        placeholder="0000 0000 0000 0000"
      />
      <MaskedInput
        label="Time"
        mask="99h99"
        value={time}
        onChange={(e) => setTime(e.target.value)}
        placeholder="00h00"
      />
    </>
  );
}

Error state

Invalid CPF.

import { MaskedInput } from '@kactostecnologia/benix-ds';


export default function CpfValidation() {
  return (
    <MaskedInput
      label="CPF"
      mask="CPF"
      value="123.456.789-01"
      onChange={() => {}}
      error="Invalid CPF."
    />
  );
}

API Reference

Props of the MaskedInput component.

PropTypeDefaultDescription
mask*'CPF' | 'CNPJ' | 'CEP' | 'PHONE' | 'CELL'——
value*string——
onChange*(e: React.ChangeEvent<HTMLInputElement>) => void——
labelstring—Renders an inline label above the input.
errorstring—Error message displayed below the input.