Selfie Capture Flow

ProNew

A guided selfie step: instructions before the camera starts, a mirrored preview with a face guide, a countdown, retake, and a confirm that sends the photo. Use this when a verification or profile step needs a fresh photo of the person.

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 flow needs a live photo (identity check, check-in, profile) and people should know what will happen before the camera turns on.

Do not use it when: If a file upload is acceptable, offer it; a camera is a permission people can refuse.

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
`onSubmit`	`(photo: File) => Promise<void>`	Send the photo. A rejection shows "Try sending again" and "Take a new photo".

Accessibility

The camera starts only after the person has read what will happen and pressed Continue; the same rule as Webcam Capture (the camera turns on from a button, the stream stops after the photo).
Each step has a heading or a status line, errors are alerts with two clear recovery buttons, and the countdown is announced number by number.
Offer a file upload alternative where you can: some people have no camera or cannot use one.

Testing

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

Guide and examples

When to use it

A flow needs a live photo (identity check, check-in, profile) and people should know what will happen before the camera turns on.

Do not use it when: If a file upload is acceptable, offer it; a camera is a permission people can refuse.

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
`onSubmit`	`(photo: File) => Promise<void>`	Send the photo. A rejection shows "Try sending again" and "Take a new photo".

Accessibility

The camera starts only after the person has read what will happen and pressed Continue; the same rule as Webcam Capture (the camera turns on from a button, the stream stops after the photo).
Each step has a heading or a status line, errors are alerts with two clear recovery buttons, and the countdown is announced number by number.
Offer a file upload alternative where you can: some people have no camera or cannot use one.

Testing

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