Focus Management

Conform will focus on the first invalid field on submit.

Focusing before JavaScript is loaded

Conform utilises the autofocus attribute to enable error focus working in a progressive manner. This is achieved by checking if there is any initial error from the previous submission using the conform helpers.

1import { useForm, conform } from '@conform-to/react';
2
3function Example() {
4  const [form, { message }] = useForm();
5
6  return (
7    <form {...form.props}>
8      <input {...conform.input(message)} />
9      <div>{message.error}</div>
10      <button>Send</button>
11    </form>
12  );
13}
14

Focusing on Custom Control

Conform can focus on custom control as well. Here is an example snippet integrating with react-select:

1function Select({ options, ...config }: SelectProps) {
2  const shadowInputRef = useRef<HTMLInputElement>(null);
3  const customInputRef = useRef<HTMLInputElement>(null);
4  const control = useInputEvent({
5    ref: shadowInputRef,
6  });
7
8  return (
9    <>
10      <input
11        ref={shadowInputRef}
12        {...conform.input(config, { hidden: true })}
13        onFocus={() => customInputRef.current?.focus()}
14      />
15      <Select
16        innerRef={customInputRef}
17        options={options}
18        defaultValue={config.defaultValue ?? ''}
19        onChange={control.change}
20        onFocus={control.focus}
21        onBlur={control.blur}
22      />
23    </>
24  );
25}
26

Please check the integration guide for more details.