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

Name Type Description

Name		Type	Description
`name`		`string`	A input field name to focus
`options`	`shouldSelect`	`boolean`	Whether to select the input content on focus. const { setFocus } = useForm() setFocus("name", { shouldSelect: true })

name

string

A input field name to focus

options

shouldSelect

boolean

Whether to select the input content on focus.

const { setFocus } = useForm()

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

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 "./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";

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>
  );
}

Thank you for your support

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