ID Document Capture with a Fallback

ProNew

Capture an ID or a receipt with the rear camera, a card-shaped guide overlay, a reminder to avoid glare, and an "Upload a file instead" path that is always available. Use this when a document photo is required and the camera might not work.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

A document must be photographed (ID, receipt, cheque) and the person might be on a phone or a laptop without a camera.

Do not use it when: For faces use the selfie flow, which mirrors the preview.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`onDocument`	`(file, source: "camera" \| "upload") => void`	Called with the photo or the uploaded file.

Accessibility

A file upload is always offered next to the camera, because some devices have no usable camera and some people cannot use one. The file input uses capture="environment", so phones can open their camera app directly.
The guide overlay is decorative (aria-hidden, pointer-events: none); instructions are real text before the camera starts.
All camera states (permission denied, no camera, error) come from Webcam Capture as alerts with Try again, and "Cancel and choose another way" is always there.

Testing

The pattern ships with a Testing Library test (id-document-capture.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

A document must be photographed (ID, receipt, cheque) and the person might be on a phone or a laptop without a camera.

Do not use it when: For faces use the selfie flow, which mirrors the preview.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`onDocument`	`(file, source: "camera" \| "upload") => void`	Called with the photo or the uploaded file.

Accessibility

A file upload is always offered next to the camera, because some devices have no usable camera and some people cannot use one. The file input uses capture="environment", so phones can open their camera app directly.
The guide overlay is decorative (aria-hidden, pointer-events: none); instructions are real text before the camera starts.
All camera states (permission denied, no camera, error) come from Webcam Capture as alerts with Try again, and "Cancel and choose another way" is always there.

Testing

The pattern ships with a Testing Library test (id-document-capture.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.