component · 105/108
Document Field
CPF and CNPJ entry with masking, check digits, and the alphanumeric CNPJ.
Install
Install manuallyView source on GitHub
Anatomy
- DocumentField
- DocumentFieldLabel
- DocumentFieldControl
- DocumentFieldInput
- DocumentFieldStatusIcon
- DocumentFieldKind
- DocumentFieldDescription
- DocumentFieldError
Accessibility4 checks
- The input keeps a persistent label; the default names the accepted documents (CPF, CNPJ, or CPF ou CNPJ).
- Masking keeps the caret in place while typing or deleting in the middle of the number.
- Invalid and incomplete numbers set aria-invalid and swap the description for an alert linked through aria-describedby.
- The detected document type is printed as text, and the status icon is decorative.
Brazil
CNPJ
Aceita CPF e CNPJ, inclusive o novo CNPJ com letras.
Code example
usage.tsx"use client";import { DocumentField, DocumentFieldControl, DocumentFieldDescription, DocumentFieldError, DocumentFieldInput, DocumentFieldKind, DocumentFieldLabel, DocumentFieldStatusIcon, type DocumentFieldVariant,} from "@/components/ui/uai/document-field";export function DocumentFieldPreview({ variant = "rounded" }: { variant?: DocumentFieldVariant }) { return ( <DocumentField variant={variant} accept="any" defaultValue="12ABC34501DE35"> <DocumentFieldLabel /> <DocumentFieldControl> <DocumentFieldInput name="documento" /> <DocumentFieldStatusIcon /> <DocumentFieldKind /> </DocumentFieldControl> <DocumentFieldDescription> Aceita CPF e CNPJ, inclusive o novo CNPJ com letras. </DocumentFieldDescription> <DocumentFieldError /> </DocumentField> );}Manual installation
document-field.tsxLoading component source…