# Document Field

> CPF and CNPJ entry with masking, check digits, and the alphanumeric CNPJ.

- Category: Brazil
- Kind: component
- Page: https://uaiblocks.dev/components/document-field
- Registry item: https://uaiblocks.dev/r/document-field.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/document-field.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/document-field.json
```

## 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>
  );
}
```

## Anatomy

- `DocumentField`
  - `DocumentFieldLabel`
  - `DocumentFieldControl`
    - `DocumentFieldInput`
    - `DocumentFieldStatusIcon`
    - `DocumentFieldKind`
  - `DocumentFieldDescription`
  - `DocumentFieldError`

## Accessibility

- 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.