Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA form in a dialog that handles the server saying no: locked while sending, per-field and form-level errors announced and linked, and focus on the first invalid field.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this for create and edit forms in a dialog whose server can reject the input: duplicate emails, name taken, quota reached. onSubmit returns the errors, the pattern shows them.
Do not use it for forms with many fields, conditional fields or long sections; give those a page. Client-side format checks still belong on the fields themselves.
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.
| Prop | Type | Default | Description |
|---|---|---|---|
fields | { name, label, type?, required? }[] | - | The fields; values are read from the form. |
onSubmit | (values) => Promise<{ fieldErrors?, formError? } | void> | - | Resolve with errors to show them, with nothing to close. |
title, description | ReactNode | - | Dialog text. |
submitLabel | string | Save | Label of the submit button. |
children | ReactNode | - | The trigger. |
role="alert" message; the field gets aria-invalid and aria-describedby pointing to it, and focus moves to the first invalid field.| Key | Action |
|---|---|
| Enter in a field | submits |
| Escape | closes (not while saving) |
The pattern ships a Testing Library test (dialog-form-submit.test.tsx) that covers success, field errors with focus and description, a thrown error and the locked pending state.