Practical technology learning
Build an Accessible React Enquiry Form: Labels, Errors and Submission States
A small enquiry form can teach more frontend judgement than a large collection of disconnected components. It combines input state, labels, validation, asynchronous feedback and keyboard use. Build this exercise with a local mock service and invented data. Its purpose is to practise the interaction, not to collect real enquiries.
Choose the smallest useful form
Use a name, course choice and short message. Explain why each field is needed, and remove anything that does not serve the exercise. Do not add a date of birth, identity document or detailed personal history merely because another form contains those fields.
Write the expected states before coding: untouched, editing, invalid, submitting, successful and failed. A visible list helps you discover gaps that a static screenshot would miss.
Make labels and input state predictable
Associate every visible label with its control. A placeholder disappears while someone types and should not carry the only explanation of a field. Use native controls when possible so you inherit useful browser behaviour.
React supports controlled and uncontrolled inputs. If you choose controlled inputs, keep values consistent and update state in the change handler. Avoid switching a field between undefined and a string value as the user interacts.
Describe the problem where it occurs
Write errors that explain a correction: 'Choose a course' is more useful than 'Invalid input.' Connect the message to the field programmatically, and ensure an error can be understood without seeing a red border.
After a rejected submission, make the error summary or first invalid field reachable. Keep keyboard focus visible. Check whether someone can tab through the controls in a sensible order and activate the submit button without a mouse.
Represent the request honestly
Show a submitting state when a request is pending and guard against duplicate sends. Do not display a success message just because the button was clicked. Wait for the service's confirmed response.
For a failed request, explain that the message was not confirmed and preserve non-sensitive input that helps the user try again. A network failure and a field-validation error require different explanations. Use a polite status announcement where appropriate.
Run a short manual review
- Complete the form using only the keyboard.
- Submit empty and partially completed forms.
- Trigger a slow response and attempt a second submission.
- Simulate a failed request and confirm entered text remains available.
- Check labels, errors and focus at a narrow mobile width.
- Confirm a success message appears only after a successful response.
Connect the interface to a real contract later
When the mock version is reliable, compare its request shape with the backend contract. Client checks help people correct mistakes, while the server remains responsible for its own validation and access controls.
Document the states with screenshots using fictional details. Explain one accessibility decision and one failure case in the README. Mango Engineers' React learning path can be discussed alongside JavaScript foundations; confirm current prerequisites and course scope with the team.