Success feedback
Show a confirmation after the server accepts the form.
Conform · Pipe
form.status
form.status tells you the result of the form's latest submission. It is undefined before submission, then success or error.
How it works
form.status exposes the result of the form's latest submission. It is undefined before submission, then becomes success when the submission succeeds or error when it fails, so the UI can show feedback based on that state.
Syntax
form.statusReturns
'success' | 'error' | undefined
Key points
- The property reports the result of the form's submission.
- Its submitted states are
successfor success anderrorfor failure. - An untouched form has no submission result and therefore exposes
undefined. - The type is a three-way union, making each possible state explicit in TypeScript.
Common mistakes
- Before the form is submitted, the value is
undefined; do not treat it as a submission failure.
Example: Render submission feedback
const { form } = useForm();
return (
<form {...form.props}>
{form.status === 'success' && <p>Saved.</p>}
{form.status === 'error' && <p>Could not save.</p>}
</form>
);Reads the latest submission result and renders feedback for successful or failed submissions.
When to use it
Failure feedback
Display a retry message after a failed submission.
Initial-state handling
Keep result messaging hidden until the first submit.
Interview questions
QWhat does form.status represent?
form.status is a discriminated submission-state value: undefined, success, or error. It describes the result of the form submission rather than whether the current field values pass validation.
Follow-up: How would you distinguish invalid input from a failed successful submission? Use the form's validation information, such as form.valid and errors, alongside form.status, because status alone only reports the submission result.
QHow can a form use this property in its UI?
A successful submission sets the value to success, while a failed submission sets it to error. Rendering conditional feedback from these values lets the form communicate its latest result without changing the form markup.
Follow-up: What should the UI render before any submission? Treat undefined as the initial state and avoid showing success or failure feedback until a submission has occurred.
QWhere does form.status come from?
The property is returned on the form metadata from useForm. Read it as form.status and compare it against the documented string literals.
Follow-up: Where should validation state be read? Use the separate form validity and error metadata for validation details; keep form.status for the submission outcome.
Related
useFormform.validform.errorssubmission.status