Bind each input as a controlled component and keep form data in React state (useState or useReducer). Create a small reusable useForm hook to manage values, touched/errors, onChange/onBlur handlers, validation, and submit state. Then wire inputs’ value and onChange to that state so they update reactively inside Lovable’s editor and Preview.

Lovable prompt — add a reusable useForm hook and a ContactForm component

Paste the prompt below into Lovable chat to make the code changes. It will create two files and update App to render the form so you can Preview and test bindings without any CLI.

• Create src/hooks/useForm.ts
• Create src/components/ContactForm.tsx
• Update src/App.tsx to render the form (if you have a different root file, tell Lovable to update that file instead)

// Please create src/hooks/useForm.ts with the following content
// This hook manages form values, touched state, errors, validation and submission state.
import { useReducer } from "react";

type State<T> = {
  values: T;
  touched: Partial<Record<keyof T, boolean>>;
  errors: Partial<Record<keyof T, string>>;
  submitting: boolean;
};

type Action<T> =
  | { type: "CHANGE"; name: keyof T; value: any }
  | { type: "BLUR"; name: keyof T }
  | { type: "SET_ERRORS"; errors: Partial<Record<keyof T, string>> }
  | { type: "SET_SUBMITTING"; submitting: boolean }
  | { type: "RESET"; values: T };

export function useForm<T>(initialValues: T, validate?: (values: T) => Partial<Record<keyof T, string>>) {
  const reducer = (state: State<T>, action: Action<T>): State<T> => {
    switch (action.type) {
      case "CHANGE":
        return { ...state, values: { ...state.values, [action.name]: action.value } };
      case "BLUR":
        return { ...state, touched: { ...state.touched, [action.name]: true } };
      case "SET_ERRORS":
        return { ...state, errors: action.errors };
      case "SET_SUBMITTING":
        return { ...state, submitting: action.submitting };
      case "RESET":
        return { values: action.values, touched: {}, errors: {}, submitting: false };
      default:
        return state;
    }
  };

  const [state, dispatch] = useReducer(reducer, {
    values: initialValues,
    touched: {},
    errors: {},
    submitting: false,
  } as State<T>);

  const handleChange = (name: keyof T) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    dispatch({ type: "CHANGE", name, value: e.target.value });
    if (validate) {
      const nextValues = { ...state.values, [name]: e.target.value } as T;
      dispatch({ type: "SET_ERRORS", errors: validate(nextValues) });
    }
  };

  const handleBlur = (name: keyof T) => () => {
    dispatch({ type: "BLUR", name });
    if (validate) {
      dispatch({ type: "SET_ERRORS", errors: validate(state.values) });
    }
  };

  const submit = async (onSubmit: (values: T) => Promise<void> | void) => {
    if (validate) {
      const errors = validate(state.values);
      dispatch({ type: "SET_ERRORS", errors });
      if (Object.keys(errors).length) return;
    }
    dispatch({ type: "SET_SUBMITTING", submitting: true });
    try {
      await onSubmit(state.values);
    } finally {
      dispatch({ type: "SET_SUBMITTING", submitting: false });
    }
  };

  const reset = (values: T) => dispatch({ type: "RESET", values });

  return {
    values: state.values,
    touched: state.touched,
    errors: state.errors,
    submitting: state.submitting,
    handleChange,
    handleBlur,
    submit,
    reset,
  };
}

// Please create src/components/ContactForm.tsx with the following content
// This is a fully controlled form using the useForm hook. No external deps required.
import React from "react";
import { useForm } from "../hooks/useForm";

type Values = { name: string; email: string; message: string };

const validate = (values: Values) => {
  const errors: Partial<Record<keyof Values, string>> = {};
  if (!values.name.trim()) errors.name = "Name is required";
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) errors.email = "Valid email required";
  if (values.message.trim().length < 5) errors.message = "Message must be at least 5 characters";
  return errors;
};

export default function ContactForm() {
  const { values, errors, touched, submitting, handleChange, handleBlur, submit, reset } = useForm<Values>(
    { name: "", email: "", message: "" },
    validate
  );

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await submit(async (vals) => {
      // // Replace this with a fetch to your API using Secrets UI for keys if needed
      console.log("Submitted values:", vals);
      // Simulate success and reset
      reset({ name: "", email: "", message: "" });
    });
  };

  return (
    <form onSubmit={onSubmit}>
      <div>
        <label>Name</label>
        <input name="name" value={values.name} onChange={handleChange("name")} onBlur={handleBlur("name")} />
        {touched.name && errors.name && <div style={{ color: "red" }}>{errors.name}</div>}
      </div>

      <div>
        <label>Email</label>
        <input name="email" value={values.email} onChange={handleChange("email")} onBlur={handleBlur("email")} />
        {touched.email && errors.email && <div style={{ color: "red" }}>{errors.email}</div>}
      </div>

      <div>
        <label>Message</label>
        <textarea name="message" value={values.message} onChange={handleChange("message")} onBlur={handleBlur("message")} />
        {touched.message && errors.message && <div style={{ color: "red" }}>{errors.message}</div>}
      </div>

      <button type="submit" disabled={submitting}>{submitting ? "Sending..." : "Send"}</button>
    </form>
  );
}

// Please update src/App.tsx (or your app root) to render the ContactForm
import React from "react";
import ContactForm from "./components/ContactForm";

export default function App() {
  return (
    <div style={{ padding: 20 }}>
      <h1>Contact</h1>
      <ContactForm />
    </div>
  );
}

How to test inside Lovable

• Use Preview to interact with the form: typing should immediately update the fields and show validation errors on blur.
• Inspect console in Preview for the simulated submit log. If you later wire to an external API, store keys in Lovable Secrets UI and fetch from the client or a server route as appropriate.
• When adding external packages (e.g., form libraries), use GitHub export/sync and run installs locally — Lovable has no terminal inside the editor.

Keeping it short: prefer a single source of truth, small reusable inputs that are predictable (controlled with an optional uncontrolled fallback), debounce heavy updates, memoize handlers to avoid broad re-renders, prioritize accessibility/validation hooks, and use Lovable Preview + Secrets UI + GitHub sync to validate production behavior. Implement these as small, well-documented components and a lightweight form hook so your app behaves the same in Lovable’s editor and in deployed builds.

Concrete Lovable prompts you can paste into Lovable’s chat to apply these best practices

• Create a reusable, predictable input component that supports controlled usage, an optional debounce, and accessibility attributes. This keeps inputs consistent and easy to test in Preview.
• Use a small, local form hook (useReducer) rather than scattering state everywhere. That keeps a single source of truth while minimizing re-renders.
• Test in Preview and store any API keys in Lovable Secrets; use GitHub sync/export for server-side changes.

Prompt 1 — Create a reusable input component:

Please create a new file at src/components/ControlledInput.tsx and add the following React component. It should be used as the standard input building block across the app. // update or create this file

// src/components/ControlledInput.tsx
import React, { useEffect, useState, useRef, useCallback } from 'react';

export type ControlledInputProps = {
  name: string;
  value?: string;
  defaultValue?: string;
  onChange?: (name: string, value: string) => void;
  debounceMs?: number;
  type?: string;
  placeholder?: string;
  ariaLabel?: string;
};

export default function ControlledInput(props: ControlledInputProps) {
  const { name, value, defaultValue = '', onChange, debounceMs = 0, type = 'text', placeholder, ariaLabel } = props;
  const [local, setLocal] = useState<string>(value ?? defaultValue);
  const timer = useRef<number | null>(null);

  // Keep local in sync if parent changes value (single source of truth)
  useEffect(() => {
    if (value !== undefined && value !== local) {
      setLocal(value);
    }
  }, [value]); // eslint-disable-line react-hooks/exhaustive-deps

  const emit = useCallback(
    (v: string) => {
      if (!onChange) return;
      onChange(name, v);
    },
    [name, onChange]
  );

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const v = e.target.value;
    setLocal(v);
    if (debounceMs > 0) {
      if (timer.current) window.clearTimeout(timer.current);
      timer.current = window.setTimeout(() => {
        emit(v);
        timer.current = null;
      }, debounceMs);
    } else {
      emit(v);
    }
  };

  // cleanup timeout on unmount
  useEffect(() => {
    return () => {
      if (timer.current) window.clearTimeout(timer.current);
    };
  }, []);

  return (
    <input
      name={name}
      value={local}
      onChange={handleChange}
      type={type}
      placeholder={placeholder}
      aria-label={ariaLabel ?? name}
      // keep styling/classes minimal here; parent can wrap or style
    />
  );
}

Prompt 2 — Add a lightweight form hook and example form page:

Please create a new hook at src/hooks/useFormState.tsx and a small example form at src/pages/ProfileForm.tsx that uses ControlledInput. The hook should centralize state and provide setValue, getValues, and a basic validate callback. // create these files

// src/hooks/useFormState.tsx
import { useReducer, useCallback } from 'react';

type State = Record<string, string>;
type Action = { type: 'set'; name: string; value: string } | { type: 'reset'; initial?: State };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'set':
      return { ...state, [action.name]: action.value };
    case 'reset':
      return action.initial ?? {};
    default:
      return state;
  }
}

export default function useFormState(initial: State = {}) {
  const [state, dispatch] = useReducer(reducer, initial);

  const setValue = useCallback((name: string, value: string) => {
    dispatch({ type: 'set', name, value });
  }, []);

  const reset = useCallback((nextInitial?: State) => {
    dispatch({ type: 'reset', initial: nextInitial });
  }, []);

  const getValues = useCallback(() => ({ ...state }), [state]);

  return { state, setValue, getValues, reset };
}

// src/pages/ProfileForm.tsx
import React from 'react';
import ControlledInput from '../components/ControlledInput';
import useFormState from '../hooks/useFormState';

export default function ProfileForm() {
  const { state, setValue, getValues } = useFormState({ name: '', email: '' });

  const onChange = (name: string, value: string) => {
    // lightweight centralized update
    setValue(name, value);
  };

  const submit = () => {
    const payload = getValues();
    // // Use Lovable Preview to test; if sending to an API, store keys in Lovable Secrets
    console.log('submit payload', payload);
  };

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        submit();
      }}
    >
      <label>
        Name
        <ControlledInput name="name" value={state.name} onChange={onChange} ariaLabel="Full name" />
      </label>

      <label>
        Email
        <ControlledInput name="email" value={state.email} onChange={onChange} type="email" />
      </label>

      <button type="submit">Save</button>
    </form>
  );
}

Practical notes and Lovable workflow tips

• Preview frequently: Use Lovable Preview to validate behavior (debounce, controlled updates) because there’s no terminal in Lovable.
• Secrets and server calls: Put API keys into Lovable Secrets UI for any client/server calls. If you need a server build step or native binaries, use GitHub sync/export and run CI locally (outside Lovable) — label those changes “outside Lovable (terminal required).”
• Performance: Memoize handlers, avoid updating top-level state for every keystroke (debounce or batch), and keep inputs as small, cheap components.
• Accessibility & validation: Add aria-labels, use onBlur for expensive validations, and show inline validation to keep UX smooth in Preview and production.