Forms in React

Controlled components, validation, multi-step forms, and form libraries.

Overview

Forms are essential for user input. React provides controlled and uncontrolled approaches.

Key Concepts

• Controlled Components — Form values bound to state
• Uncontrolled Components — Access values via refs
• Validation — Client-side validation with error states
• Multi-step Forms — Wizard-style forms with state persistence
• Form Libraries — React Hook Form and Formik for complex forms

Code Examples

import { useForm } from 'react-hook-form';

function RegistrationForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log('Form data:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Name</label>
        <input 
          {...register('name', { required: 'Name is required' })}
        />
        {errors.name && <span>{errors.name.message}</span>}
      </div>
      <div>
        <label>Email</label>
        <input 
          type="email"
          {...register('email', { 
            required: 'Email is required',
            pattern: { value: /^\S+@\S+$/i, message: 'Invalid email' }
          })}
        />
        {errors.email && <span>{errors.email.message}</span>}
      </div>
      <button type="submit">Register</button>
    </form>
  );
}

Practice

Build a multi-step registration form with validation at each step.