Skip to content

setFocus

Manually set an input focus

setFocus:(name: string) => void

This method will allow users to programmatically focus on input. Make sure input's ref is registered into the hook form.

Rules

This API will invoke focus method from the ref, so it's important to provide ref during register.

import * as React from "react";
import { useForm } from "./src";

export default function App() {
  const { register, handleSubmit, setFocus } = useForm();
  const onSubmit = (data) => console.log(data);
  renderCount++;

  React.useEffect(() => {
    setFocus("firstName");
  }, [setFocus]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} placeholder="First Name" />
      <input type="submit" />
    </form>
  );
}
import * as React from "react";
import { useForm } from "./src";

type FormValues = {
  firstName: string;
};

export default function App() {
  const { register, handleSubmit, setFocus } = useForm<FormValues>();
  const onSubmit = (data: FormValues) => console.log(data);
  renderCount++;

  React.useEffect(() => {
    setFocus("firstName");
  }, [setFocus]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} placeholder="First Name" />
      <input type="submit" />
    </form>
  );
}

We Need Your Support

If you find React Hook Form to be useful in your React project, please star to support the repo and contributors ❤

Edit