Command Palette

Search for a command to run...

Hectal
Phase 5Intermediate6 of 28 in React

Forms and User Input

Controlled and uncontrolled inputs, checkboxes, radios and selects, submitting with FormData, one state object for many fields, validation with ARIA, and form libraries.

Forms are where users talk back to your app: a search box, a login, a checkout, a settings page. In plain HTML the browser keeps what the user typed inside each field. In React you choose: let React state hold every value (a controlled input), or let the browser keep it and read it when you need it (an uncontrolled input). This phase teaches both, and when to pick each.

You'll handle every kind of field (text, textarea, checkbox, radio, select, number, file), submit forms properly with onSubmit, preventDefault and FormData, manage many fields with one state object and one change handler, and build validation that is friendly and accessible, with aria-invalid and aria-describedby.

Finally you'll see why libraries such as React Hook Form and Zod exist, how their main APIs look, and build a small version of them yourself. React 19 also lets a <form> call a function directly through its action prop; you'll get a first look here and the full story in Phase 19.

0/7 · 0%
7 topics ~3 h 20 code blocks & diagrams
Start with the first topic
1
5.1

Controlled Inputs

A controlled input gets its value from React state and reports every keystroke through onChange, so the state is the one source of truth and the field always shows exactly what the state says.

22 min 1 diagram 3 code practice

2
5.2

Checkboxes, Radio Buttons and Selects

Checkboxes and radios are controlled with checked (a boolean), selects with value (a string, or an array for multiple), and every value that comes out of a field, even a number field, is a string you convert yourself.

27 min 3 code practice

3
5.3

Uncontrolled Inputs

An uncontrolled input keeps its own value in the DOM: you give it a starting value with defaultValue or defaultChecked and read it when you need it, with a ref or with FormData; file inputs are always uncontrolled.

22 min 3 code practice

4
5.4

Submitting Forms

Handle a form with onSubmit on the <form>, stop the page reload with e.preventDefault(), read the fields with FormData and Object.fromEntries, track a sending status so the button is disabled while you wait, and reset the form when it's done.

22 min 3 code practice

5
5.5

Many Fields with One State Object

Keep a form's values in one state object, give every field a name that matches a key, and update any field with one change handler using a computed property key: { ...form, [e.target.name]: e.target.value }.

22 min 2 code practice

6
5.6

Validation and Error Messages

Validate with one function that turns values into errors, decide when to show them (on submit, on blur with a touched flag, or on change), connect each message to its field with aria-invalid and aria-describedby, use the browser's built-in checks where they fit, and always validate again on the server.

23 min 2 code practice

7
5.7

Form Libraries: React Hook Form and Zod

React Hook Form manages field registration, submission, errors and touched state for you (mostly with uncontrolled inputs), and Zod describes your data's rules as a schema you can reuse on the client and the server; for small forms plain React is enough.

24 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

A controlled name field

Make the input with id="name" a controlled input: keep its text in state, with value and onChange.

Beginner
2

Pizza order: radios, checkboxes and a select

Make every choice controlled. Size: three radios with name="size" and values S, M, L, starting at M. Toppings: checkboxes with name="topping" and values cheese, olives, corn, none ticked at first. Crust: the select id="crust" with thin (the start) and thick.

Intermediate
3

One state object, one handler

Rewrite this form so all its values live in one useState object: { name: "", email: "", city: "", newsletter: false }.

Intermediate
4

Sign-up form with accessible errors

Add validation to this sign-up form. Rules: the email (id="email") must look like name@domain.tld, otherwise the message is Enter a valid email.; the password (id="password") needs at least 8 characters, otherwise Use at least 8 characters.

Intermediate
5

Mini build: a contact form that sends

Build a working contact form with a name input (id="name", name="name"), a message textarea (id="message", name="message") and a submit button (id="send").

Advanced