Forms — Cheat Sheet

Controlled and Uncontrolled Inputs

const [email, setEmail] = useState('')

<input
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>

// Because state owns it, you can act on every keystroke
<input
  value={pin}
  onChange={(e) => setPin(e.target.value.replace(/\D/g, '').slice(0, 6))}
/>
// digits only, max six — the user cannot type anything else

// The other input types
<input type="checkbox" checked={agreed} onChange={e => setAgreed(e.target.checked)} />
<select value={level} onChange={e => setLevel(e.target.value)}>
<textarea value={notes} onChange={e => setNotes(e.target.value)} />

// Several fields in one object
const [values, setValues] = useState({ name: '', email: '' })
const onChange = (e) =>
  setValues(v => ({ ...v, [e.target.name]: e.target.value }))
<input name="email" value={values.email} onChange={onChange} />

Validation — Rules, Timing and Messages

import { z } from 'zod'

const SignupSchema = z.object({
  name: z.string().min(2, 'Please enter your name'),
  email: z.string().email('That does not look like an email'),
  password: z.string()
    .min(8, 'At least 8 characters')
    .regex(/[0-9]/, 'Include a number'),
  confirm: z.string(),
  age: z.coerce.number().int().min(13, 'You must be 13 or older'),
}).refine(v => v.password === v.confirm, {
  message: 'Passwords do not match',
  path: ['confirm'],                 // attaches the error to the right field
})

type SignupValues = z.infer<typeof SignupSchema>    // the type, for free

// Validating gives you either the parsed values or field errors
const result = SignupSchema.safeParse(values)
if (!result.success) setErrors(result.error.flatten().fieldErrors)

// The same schema can run on a Node backend, which is the strongest
// version of "define the rules once".

React Hook Form

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'

function SignupForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting, isDirty, isValid },
    reset,
    setError,
  } = useForm({
    resolver: zodResolver(SignupSchema),     // the schema from the last concept
    defaultValues: { name: '', email: '' },
    mode: 'onBlur',                          // the timing convention
  })

  async function onSubmit(values) {          // only runs if validation passed
    await signup(values)
    reset()
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} aria-invalid={!!errors.email} />
      {errors.email && <p role="alert">{errors.email.message}</p>}

      <button disabled={isSubmitting || !isDirty}>
        {isSubmitting ? 'Creating…' : 'Create account'}
      </button>
    </form>
  )
}

// Typing re-renders nothing. Only error state changes cause renders.

Submission — Pending, Success and Failure

<button type="submit" disabled={isSubmitting} aria-busy={isSubmitting}>
  {isSubmitting ? 'Saving…' : 'Save changes'}
</button>

// Disabled alone is not enough feedback. A label change or spinner
// tells the user the click registered.

// Reserve the width so the button does not resize between the two
// labels, which reads as a jitter:
<span className="min-w-[8ch] inline-block text-center">…</span>

// Prevent the other paths to a double submit:
//   - Enter in a text field submits the form too
//   - a second click during the request
// Both are covered by disabling on isSubmitting, provided the flag
// is set before the await:
setSubmitting(true)
try { await save(values) } finally { setSubmitting(false) }

// For anything that creates a record, an idempotency key makes the
// duplicate harmless even if one slips through.

File Upload

const [file, setFile] = useState(null)
const [preview, setPreview] = useState(null)

function onChange(e) {
  const f = e.target.files?.[0]
  if (!f) return

  if (!['image/jpeg', 'image/png', 'image/webp'].includes(f.type))
    return setError('Please choose a JPEG, PNG or WebP image')
  if (f.size > 5 * 1024 * 1024)
    return setError('Images must be under 5MB')

  setFile(f)
  setPreview(URL.createObjectURL(f))       // an object URL, not a data URL
}

// Object URLs must be revoked or the file stays in memory
useEffect(() => () => { if (preview) URL.revokeObjectURL(preview) }, [preview])

<input type="file" accept="image/*" onChange={onChange} />
// accept filters the OS picker; it does not enforce anything.
// The extension and the MIME type are both attacker-controlled —
// the server must verify the real content.

Multi-Step Forms and Wizards

const STEPS = ['account', 'profile', 'goals', 'review']

function Onboarding() {
  const [params, setParams] = useSearchParams()
  const step = STEPS.indexOf(params.get('step') ?? 'account')
  const [values, setValues] = useState(() => loadDraft() ?? {})

  const goTo = (i) => setParams({ step: STEPS[i] })      // a history entry

  const next = (stepValues) => {
    setValues(v => ({ ...v, ...stepValues }))            // merge, never replace
    goTo(step + 1)
  }

  return (
    <>
      <Progress current={step} total={STEPS.length} />
      {step === 0 && <AccountStep defaults={values} onNext={next} />}
      {step === 1 && <ProfileStep defaults={values} onNext={next} onBack={() => goTo(0)} />}
      {step === 3 && <Review values={values} onSubmit={submitAll} />}
    </>
  )
}

// Step in the URL means: back button works, refresh keeps position,
// and a support conversation can say "go to ?step=goals".