Skip to content
React Hook Form
Star

setFocus

Programmatically focus a registered input field.

View MarkdownOpen in ChatGPTOpen in Claude

</> setFocus: UseFormSetFocus

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

Props

NameTypeDescription
namestringAn input field name to focus
optionsshouldSelectbooleanSince v7.27.0 Whether to select the input content on focus.
RULES
  • This API will invoke focus method from the ref, so it's important to provide ref during register.
  • Avoid calling setFocus right after reset as all input references will be removed by reset API.

Examples

CodeSandbox TS
import { useEffect } from "react"
import { useForm } from "react-hook-form"


type FormValues = {
  firstName: string
}


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


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


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} placeholder="First Name" />
      <input type="submit" />
    </form>
  )
}
CodeSandbox JS
import { useEffect } from "react"
import { useForm } from "react-hook-form"


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


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


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

Tips

  • Focus the first field when the form opens:

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

  • You do not need setFocus to focus the first invalid field on submit. shouldFocusError does this by default.

  • For a component that does not forward a DOM ref, give field.ref an object with a focus method. See the Tips section of useController.