React Forms: Inputs, Checkboxes, Select and Validation

A React form keeps each field's value in state: the input shows value={state} and updates it with onChange. When the user submits, an onSubmit handler calls e.preventDefault() to stop the page reload and then uses the values already in state.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');
    const [greeting, setGreeting] = useState('');

    function handleSubmit(e) {
        e.preventDefault();
        setGreeting(`Hello, ${name || 'stranger'}!`);
    }

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Name{' '}
                <input name="name" value={name} onChange={(e) => setName(e.target.value)} />
            </label>{' '}
            <button type="submit">Say hello</button>
            <p>{greeting}</p>
        </form>
    );
}

Type a name and press Enter or click the button. Then delete the e.preventDefault(); line: the preview shows the fields the browser would have sent in a native submission, which in a real page would also reload it.

An input whose value comes from state is called a controlled input. The alternative, letting the DOM keep the value and reading it later, is covered in controlled vs uncontrolled components.

Text inputs and textarea

Every text field works the same way: value from state, onChange reads e.target.value. A <textarea> follows the same pattern. In HTML its text goes between the tags, but in React you pass it as value.

import { useState } from 'react';

export default function App() {
    const [title, setTitle] = useState('');
    const [body, setBody] = useState('');

    return (
        <div style={{ display: 'grid', gap: 8, maxWidth: 320 }}>
            <input
                value={title}
                onChange={(e) => setTitle(e.target.value.toUpperCase())}
                placeholder="Title (shouts)"
            />
            <textarea
                value={body}
                onChange={(e) => setBody(e.target.value)}
                rows={4}
                maxLength={140}
                placeholder="Up to 140 characters"
            />
            <small>{140 - body.length} characters left</small>
        </div>
    );
}

Because you set the value yourself, you can change what the user typed before it shows: the title field turns every letter into a capital. The character counter updates on every keystroke because body is state and each change renders again.

Select

A <select> takes value on the select element itself, not selected on an option. e.target.value is the value of the chosen option.

import { useState } from 'react';

export default function App() {
    const [plan, setPlan] = useState('monthly');
    const prices = { monthly: '$12 a month', yearly: '$99 a year', free: '$0' };

    return (
        <div>
            <select value={plan} onChange={(e) => setPlan(e.target.value)}>
                <option value="free">Free</option>
                <option value="monthly">Monthly</option>
                <option value="yearly">Yearly</option>
            </select>
            <p>You pay {prices[plan]}.</p>
        </div>
    );
}

For a multiple select, add multiple and pass an array as value. Read the choices with Array.from(e.target.selectedOptions, (o) => o.value).

Checkbox and radio buttons

A checkbox is controlled with checked, not value, and its handler reads e.target.checked, which is true or false. Radio buttons in a group share a name; each one is checked when the state equals its value.

import { useState } from 'react';

export default function App() {
    const [newsletter, setNewsletter] = useState(false);
    const [size, setSize] = useState('m');

    return (
        <div>
            <label>
                <input
                    type="checkbox"
                    checked={newsletter}
                    onChange={(e) => setNewsletter(e.target.checked)}
                />
                Send me the newsletter
            </label>

            <p>Shirt size:</p>
            {['s', 'm', 'l'].map((s) => (
                <label key={s} style={{ marginInlineEnd: 12 }}>
                    <input
                        type="radio"
                        name="size"
                        value={s}
                        checked={size === s}
                        onChange={(e) => setSize(e.target.value)}
                    />
                    {s.toUpperCase()}
                </label>
            ))}

            <p>
                Size {size.toUpperCase()}, newsletter {newsletter ? 'on' : 'off'}.
            </p>
        </div>
    );
}

Reading e.target.value on a checkbox is a common mistake: for a checkbox with no value attribute it returns the string "on" whether the box is ticked or not.

One state object for many fields

A form with ten fields does not need ten useState calls and ten handlers. Keep one object, give every input a name that matches a key, and write one handler that uses the name as a computed key: [e.target.name].

import { useState } from 'react';

export default function App() {
    const [form, setForm] = useState({
        email: '',
        country: 'NO',
        terms: false,
    });

    function handleChange(e) {
        const { name, type, value, checked } = e.target;
        setForm({ ...form, [name]: type === 'checkbox' ? checked : value });
    }

    return (
        <div style={{ display: 'grid', gap: 8, maxWidth: 280 }}>
            <input name="email" value={form.email} onChange={handleChange} placeholder="Email" />
            <select name="country" value={form.country} onChange={handleChange}>
                <option value="NO">Norway</option>
                <option value="JP">Japan</option>
                <option value="BR">Brazil</option>
            </select>
            <label>
                <input name="terms" type="checkbox" checked={form.terms} onChange={handleChange} />
                I accept the terms
            </label>
            <pre>{JSON.stringify(form, null, 2)}</pre>
        </div>
    );
}

The handler checks the input type so the checkbox stores a boolean and the others store text. Add a field by adding a key to the starting object and an input with the same name; the handler needs no change. The spread keeps every other field (see updating arrays and objects).

Submitting a form

Put the submit logic on the form's onSubmit, not on the button's onClick. onSubmit also fires when the user presses Enter in a text field, which a click handler would miss. A <button> inside a form is a submit button by default; give other buttons type="button" so they do not submit.

import { useState } from 'react';

export default function App() {
    const [form, setForm] = useState({ user: 'ada', password: '' });

    function handleChange(e) {
        setForm({ ...form, [e.target.name]: e.target.value });
    }

    function handleSubmit(e) {
        e.preventDefault();
        console.log('submitting', form);
    }

    return (
        <form onSubmit={handleSubmit}>
            <input name="user" value={form.user} onChange={handleChange} />{' '}
            <input name="password" type="password" value={form.password} onChange={handleChange} />{' '}
            <button type="button" onClick={() => setForm({ user: '', password: '' })}>
                Clear
            </button>{' '}
            <button type="submit">Log in</button>
        </form>
    );
}

Open the console, type a password and press Enter: the form logs the whole object. Clicking "Clear" logs nothing, because it is type="button". Remove that attribute and Clear starts submitting too.

Validation and showing errors

Simple validation is a function that takes the values and returns an object of messages. Run it on submit, store the result in state, and show each message under its field. Disable the submit button while a request is running so a double click does not send the form twice.

import { useState } from 'react';

function validate({ email, age }) {
    const errors = {};
    if (!email.includes('@')) errors.email = 'Enter a valid email.';
    if (!age || Number(age) < 13) errors.age = 'You must be 13 or older.';
    return errors;
}

function saveProfile(data) {
    return new Promise((resolve) => setTimeout(() => resolve(data), 800));
}

export default function App() {
    const [form, setForm] = useState({ email: '', age: '' });
    const [errors, setErrors] = useState({});
    const [status, setStatus] = useState('idle');

    async function handleSubmit(e) {
        e.preventDefault();
        const found = validate(form);
        setErrors(found);
        if (Object.keys(found).length > 0) return;
        setStatus('saving');
        await saveProfile(form);
        setStatus('saved');
    }

    const change = (e) => setForm({ ...form, [e.target.name]: e.target.value });
    const error = { color: 'crimson', margin: '4px 0 8px', fontSize: 13 };

    return (
        <form onSubmit={handleSubmit} noValidate>
            <input name="email" value={form.email} onChange={change} placeholder="Email" />
            {errors.email && <p style={error}>{errors.email}</p>}
            <input name="age" type="number" value={form.age} onChange={change} placeholder="Age" />
            {errors.age && <p style={error}>{errors.age}</p>}
            <div style={{ marginTop: 8 }}>
                <button disabled={status === 'saving'}>
                    {status === 'saving' ? 'Saving...' : 'Save'}
                </button>
                {status === 'saved' && ' Saved.'}
            </div>
        </form>
    );
}

Click Save with the fields empty to see both messages, then fill them in. saveProfile is a stand-in for a real request: it waits 800 milliseconds and resolves. The noValidate attribute turns off the browser's own validation bubbles so only your messages show; drop it and add required to an input to compare.

Errors can also be computed during render instead of stored, for example const emailError = form.email && !form.email.includes('@'), which shows the message as the user types. Pick whichever timing suits the form: on submit is calmer, while typing gives faster feedback.

Form actions in React 19

React 19 adds another way to handle a form. Pass a function to the form's action prop. React prevents the page reload for you and calls the function with a FormData object holding every field that has a name. The fields do not need state at all: they are uncontrolled, and React clears them after the action finishes.

import { useState } from 'react';

function addComment(text) {
    return new Promise((resolve) => setTimeout(() => resolve(text), 500));
}

export default function App() {
    const [comments, setComments] = useState([]);

    async function postComment(formData) {
        const text = formData.get('comment');
        console.log('action received', text);
        const saved = await addComment(text);
        setComments((list) => [...list, saved]);
    }

    return (
        <form action={postComment}>
            <input name="comment" defaultValue="Nice docs" />{' '}
            <button type="submit">Post</button>
            <ul>
                {comments.map((c, i) => (
                    <li key={i}>{c}</li>
                ))}
            </ul>
        </form>
    );
}

Type your own comment and post it. The list shows your text, and the input goes back to Nice docs: after the action resolves, React resets uncontrolled fields to their defaultValue. The action can be async, and while it runs React treats the update as a transition.

To show a pending state or an error from the action, wrap it with useActionState, which returns the latest result, a wrapped action for the form, and an isPending flag. A button deep inside the form can also read the pending state with useFormStatus from react-dom:

import { useFormStatus } from 'react-dom';

function SubmitButton() {
    const { pending } = useFormStatus();
    return <button disabled={pending}>{pending ? 'Posting...' : 'Post'}</button>;
}

useFormStatus is not loaded in the editors here, so it appears only in this static block. It must be called from a component rendered inside the <form>, not in the component that renders the form.

Controlled state with onSubmit and form actions with FormData both work in React 19. Controlled fields suit forms that react while you type (live validation, a character counter, fields that depend on each other). Actions suit forms where you only need the values when the user submits.