Um componente de input de texto com strategies inteligentes para formatação automática de CNPJ, CPF, CEP, telefone, moeda e mais. Inclui validação e formatação em tempo real.
normal, cnpj, cpf, cnpj-cpf, cep, phone, currency
Formata valores em tempo real conforme o usuário digita
Valida CNPJ, CPF e CEP com dígitos verificadores
Strategy cnpj-cpf detecta automaticamente qual formato usar
npm install molde-ui
# or
pnpm add molde-ui
# or
yarn add molde-uiimport { Input } from 'molde-ui';
import 'molde-ui/styles';
function App() {
const [cpf, setCpf] = useState('');
const [cnpj, setCnpj] = useState('');
const [cep, setCep] = useState('');
return (
<div className="flex flex-col gap-4">
<Input
strategy="cpf"
placeholder="000.000.000-00"
value={cpf}
onChange={(value) => setCpf(value)}
/>
<Input
strategy="cnpj"
placeholder="00.000.000/0000-00"
value={cnpj}
onChange={(value) => setCnpj(value)}
/>
<Input
strategy="cep"
placeholder="00000-000"
value={cep}
onChange={(value) => setCep(value)}
/>
<Input
strategy="cnpj-cpf"
placeholder="CNPJ ou CPF"
onChange={(value) => console.log(value)}
/>
</div>
);
}| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
| strategy | 'normal' | 'cnpj' | 'cpf' | 'cnpj-cpf' | 'cep' | 'phone' | 'currency' | 'normal' | Strategy de formatação e validação |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Tamanho do input |
| fullWidth | boolean | false | Input ocupa toda a largura disponível |
| error | boolean | false | Estado de erro visual |
| success | boolean | false | Estado de sucesso visual |
| value | string | - | Valor controlado do input |
| defaultValue | string | - | Valor inicial não controlado |
| onChange | (value: string, event: ChangeEvent<HTMLInputElement>) => void | - | Callback quando o valor muda (recebe valor formatado) |
| placeholder | string | - | Texto placeholder |
| className | string | '' | Classes CSS adicionais |