Form React: Input, Checkbox, Select, dan Validasi

Form React menyimpan nilai setiap field di state: input menampilkan value={state} dan memperbaruinya dengan onChange. Saat pengguna mengirim form, handler onSubmit memanggil e.preventDefault() untuk mencegah halaman dimuat ulang, lalu memakai nilai yang sudah ada di 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>
    );
}

Ketik sebuah nama lalu tekan Enter atau klik tombolnya. Kemudian hapus baris e.preventDefault();: pratinjau menampilkan field yang akan dikirim browser dalam pengiriman form bawaan, yang di halaman sungguhan juga akan memuat ulang halaman.

Input yang nilainya berasal dari state disebut input terkontrol. Alternatifnya, membiarkan DOM menyimpan nilainya lalu membacanya nanti, dibahas di controlled vs uncontrolled component.

Input teks dan textarea

Setiap field teks bekerja dengan cara yang sama: value dari state, onChange membaca e.target.value. <textarea> mengikuti pola yang sama. Di HTML, teksnya ditaruh di antara tag, tetapi di React kamu mengirimnya sebagai 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>
    );
}

Karena kamu sendiri yang mengatur nilainya, kamu bisa mengubah apa yang diketik pengguna sebelum ditampilkan: field judul mengubah setiap huruf menjadi kapital. Penghitung karakter diperbarui di setiap ketukan tombol karena body adalah state dan setiap perubahan memicu render lagi.

Select

<select> menerima value di elemen select itu sendiri, bukan selected di sebuah option. e.target.value adalah value dari option yang dipilih.

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>
    );
}

Untuk select dengan banyak pilihan, tambahkan multiple dan kirim array sebagai value. Baca pilihannya dengan Array.from(e.target.selectedOptions, (o) => o.value).

Checkbox dan radio button

Checkbox dikontrol dengan checked, bukan value, dan handler-nya membaca e.target.checked, yang bernilai true atau false. Radio button dalam satu grup memakai name yang sama; masing-masing tercentang saat state sama dengan nilainya.

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>
    );
}

Membaca e.target.value pada checkbox adalah kesalahan yang umum: untuk checkbox tanpa atribut value, hasilnya adalah string "on", entah kotaknya dicentang atau tidak.

Satu objek state untuk banyak field

Form dengan sepuluh field tidak butuh sepuluh pemanggilan useState dan sepuluh handler. Simpan satu objek, beri setiap input name yang sesuai dengan sebuah key, lalu tulis satu handler yang memakai name itu sebagai key hasil perhitungan: [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>
    );
}

Handler-nya memeriksa tipe input sehingga checkbox menyimpan boolean dan field lainnya menyimpan teks. Tambahkan sebuah field dengan menambahkan key ke objek awal dan input dengan name yang sama; handler-nya tidak perlu diubah. Spread mempertahankan semua field lainnya (lihat memperbarui array dan objek).

Mengirim form

Taruh logika submit di onSubmit milik form, bukan di onClick milik tombol. onSubmit juga terpicu saat pengguna menekan Enter di field teks, sesuatu yang akan terlewat oleh handler klik. <button> di dalam form secara default adalah tombol submit; beri tombol lain type="button" agar tidak mengirim form.

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>
    );
}

Buka konsol, ketik sebuah password, lalu tekan Enter: form mencatat seluruh objeknya. Mengklik "Clear" tidak mencatat apa pun, karena tombol itu type="button". Hapus atribut itu, dan Clear juga ikut mengirim form.

Validasi dan menampilkan error

Validasi sederhana adalah fungsi yang menerima nilai-nilai form dan mengembalikan objek berisi pesan. Jalankan saat submit, simpan hasilnya di state, dan tampilkan setiap pesan di bawah field-nya. Nonaktifkan tombol submit selama request berjalan agar klik ganda tidak mengirim form dua kali.

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>
    );
}

Klik Save dengan field kosong untuk melihat kedua pesan, lalu isi field-nya. saveProfile adalah pengganti request sungguhan: ia menunggu 800 milidetik lalu selesai. Atribut noValidate mematikan gelembung validasi bawaan browser sehingga hanya pesanmu yang tampil; hapus atribut itu dan tambahkan required ke sebuah input untuk membandingkannya.

Error juga bisa dihitung saat render alih-alih disimpan, misalnya const emailError = form.email && !form.email.includes('@'), yang menampilkan pesan selagi pengguna mengetik. Pilih waktu yang cocok untuk form-nya: saat submit terasa lebih tenang, sedangkan saat mengetik memberi umpan balik lebih cepat.

Form action di React 19

React 19 menambahkan cara lain untuk menangani form. Kirim fungsi ke prop action milik form. React mencegah halaman dimuat ulang untukmu dan memanggil fungsi itu dengan objek FormData yang berisi setiap field yang punya name. Field-field itu sama sekali tidak butuh state: semuanya tidak terkontrol, dan React mengosongkannya setelah action selesai.

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>
    );
}

Ketik komentarmu sendiri lalu kirim. List menampilkan teksmu, dan input kembali ke Nice docs: setelah action selesai, React mengembalikan field yang tidak terkontrol ke defaultValue-nya. Action bisa berupa fungsi async, dan selama berjalan, React memperlakukan pembaruannya sebagai transition.

Untuk menampilkan keadaan pending atau error dari action, bungkus dengan useActionState, yang mengembalikan hasil terbaru, action yang sudah dibungkus untuk form, dan flag isPending. Tombol yang berada jauh di dalam form juga bisa membaca keadaan pending dengan useFormStatus dari react-dom:

import { useFormStatus } from 'react-dom';

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

useFormStatus tidak dimuat di editor di sini, jadi ia hanya muncul di blok statis ini. Hook ini harus dipanggil dari komponen yang dirender di dalam <form>, bukan di komponen yang merender form-nya.

State terkontrol dengan onSubmit dan form action dengan FormData sama-sama berjalan di React 19. Field terkontrol cocok untuk form yang merespons selagi kamu mengetik (validasi langsung, penghitung karakter, field yang saling bergantung). Action cocok untuk form yang nilainya hanya kamu butuhkan saat pengguna mengirimnya.