Choose what owns each field
A controlled field receives its current value from React and reports edits through a handler. An uncontrolled field lets the browser maintain its current value and can be read when the form submits. Either approach can be useful. Choose one deliberately for each field instead of switching between undefined and a defined value as asynchronous data happens to arrive.
Keep a draft example predictable
For a project inquiry, initialize name, email and message as strings. Update each value from its corresponding input event and let the browser show the new value immediately. If a field receives a value prop without an appropriate update handler, typing may appear broken. Keep formatting transformations separate when they would unexpectedly move the caret or change what the person is still entering.
Use the form’s native structure
Associate visible labels with controls, keep meaningful name and autoComplete attributes, and use a submit button inside a form. A submit handler can prevent the default behavior when JavaScript owns the action, while still supporting Enter-key submission. Buttons for secondary actions should declare type=button so that clearing a preview does not accidentally send the entire form.
Distinguish raw input from validated data
An empty numeric field is a useful editing state even if the final value must be a positive integer. Preserve the editable text until parsing and validation are appropriate. The same distinction applies to dates and formatted identifiers. Forcing every keystroke into the final domain type can make deleting or correcting a value unexpectedly difficult.
Show errors at a helpful time
A field should not announce an error before the visitor has had a chance to complete it. Choose a validation policy such as blur, attempted submission or a carefully designed combination. Keep error text near the field and associate it programmatically where appropriate. A failed submission should retain the draft, and pending feedback should accurately reflect whether an operation is still running.
Verify ordinary entry patterns
Test typing, pasting, clearing, autocomplete and keyboard-only submission. Include a failed action followed by a successful retry, and check that the form does not reset prematurely. Confirm that a visitor can edit a partially entered numeric or email value. The best controlled form preserves the browser’s useful behavior while making application state explicit, rather than treating every edit as an opportunity to rewrite the input.
Further reading
Put the idea to work.
Explore free browser tools for images, text and developer workflows.