Skip to content

setFocus

Manually set an input focus

setFocus:(name: string, options: SetFocusOptions) => void

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

Props

NameTypeDescription
namestring

A input field name to focus

optionsshouldSelectboolean

Whether to select the input content on focus.

const { setFocus } = useForm()

setFocus("name", { shouldSelect: true })

Rules

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

Examples

CodeSandbox 
import * as React from "react";
import { useForm } from "react-hook-form";

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

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

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

Thank you for your support

If you find React Hook Form to be useful in your project, please consider to star and support it.

Edit