Generated Form with a Custom Control

ProNew

Extend a generated form with a control it does not know: an image upload sits above the generated fields, and its file is merged into the submitted values. Use this when a schema covers the text fields and one field needs a special widget.

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 generated form needs one or two bespoke inputs (avatar, signature, map pin) next to the generated ones.

Do not use it when: If most of the controls are custom, write the form by hand instead of working around the generator.

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`	`({ values, avatar }) => void \| Promise<void>`	The generated values and the chosen file (or `null`).

Accessibility

The custom control keeps its own labelling and rules (see Image Upload); it sits in the same form element, so Enter and the submit button behave as one form.
The generated fields keep their validation and focus-on-first-error; the avatar is optional here, so its absence never blocks the submit.
If you add a required custom control, validate it yourself and show its error beside it, then call your own check before onSubmit finishes.

Testing

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