Profile Photo: Camera or File

ProNew

A tabbed chooser for a profile photo: Upload a file (with drag and drop and validation) or Take a photo (the camera starts only on that tab), with the same Use this photo confirmation and a shared preview. Use this when both ways should be equally easy.

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

Onboarding or profile pages let people give a photo either from their device or by taking one.

Do not use it when: On devices where the camera is not wanted, show only the upload.

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
`onSave`	`(photo: File) => void \| Promise<void>`	Called with the chosen or captured photo.

Accessibility

Two Radix tabs with arrow-key navigation; the camera component exists only while its tab is open, so the camera light never comes on in the background and the stream stops when you leave.
Both sources lead to one shared state and one Save button; a polite status says what is ready ("profile.jpg ready to save.") and when it is saved.
Image Upload and Webcam Capture provide their own labels, validation messages and permission errors.

Testing

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

Guide and examples

When to use it

Onboarding or profile pages let people give a photo either from their device or by taking one.

Do not use it when: On devices where the camera is not wanted, show only the upload.

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
`onSave`	`(photo: File) => void \| Promise<void>`	Called with the chosen or captured photo.

Accessibility

Two Radix tabs with arrow-key navigation; the camera component exists only while its tab is open, so the camera light never comes on in the background and the stream stops when you leave.
Both sources lead to one shared state and one Save button; a polite status says what is ready ("profile.jpg ready to save.") and when it is saved.
Image Upload and Webcam Capture provide their own labels, validation messages and permission errors.

Testing

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