Element: #023 Documents and dates (inputs/masked-field)
What it shows: Five MaskedField inputs for Brazilian documents: CPF, CNPJ, combined CPF or CNPJ, birth date and RG, with validators on three.
When to use: Brazilian registration and checkout forms that collect formatted identity documents and dates.
Spec:
- `mask={maskCPF}` with `validate={(v) => (isValidCPF(v) ? undefined : 'Invalid CPF')}` and `placeholder="000.000.000-00"`
- `mask={maskCNPJ}` with `validate={(v) => (isValidCNPJ(v) ? undefined : 'Invalid CNPJ')}` and `placeholder="00.000.000/0000-00"`
- `mask={maskCPFCNPJ}` with `description="Switches mask after 11 digits."`
- `mask={maskDateBR}` with `isValidDateBR(v)` validation and `placeholder="dd/mm/yyyy"`
- `mask={maskRG}` with `placeholder="00.000.000-0"` and no `validate`
- Imports come from `@codeatlasdev/ui/forms`, each field uses `bind:value`
Tags: masked-field, cpf, cnpj, mask, validation, brazil, forms
Needs: @codeatlasdev/ui@4.4.0
Components: MaskedField
Live demo: https://ui.codeatlas.com.br/docs/inputs/masked-field#documents-and-dates
(isValidCPF(v) ? undefined : 'Invalid CPF')}
bind:value={cpf}
/>
(isValidCNPJ(v) ? undefined : 'Invalid CNPJ')}
bind:value={cnpj}
/>
(isValidDateBR(v) ? undefined : 'Invalid date')}
bind:value={birth}
/>