Conform · Hook

useInputControl

useInputControl connects custom or controlled inputs to Conform. It exposes the current value plus helpers that simulate input, change, focus, and blur events.

How it works

useInputControl accepts field metadata or equivalent options and returns a controller for integrating a custom input with Conform. Read its value for controlled rendering, call change to update the value and emit input/change events, and use focus or blur to simulate the corresponding browser events.

Syntax

useInputControl(metaOrOptions)

Parameters

Name	Type	Description
`metaOrOptions`	`FieldMetadata \| { key: string; name: string; formId?: string; initialValue?: string }`	Field metadata, or an options object containing key, name, formId, and initialValue.

Returns

An input control object exposing value, change(value: string), blur(), and focus() helpers.

Key points

The hook gives programmatic control over the browser events associated with a custom input.
Use it when a non-native input needs to integrate with Conform.
The argument can be field metadata or an options object with key, name, formId, and initialValue.
The returned value is intended to drive controlled-input rendering.
change(value) updates the value and emits both input and change events.
blur() models leaving the input by dispatching blur and focusout.
focus() models entering the input by dispatching focus and focusin.

Common mistakes

focus() and blur() only simulate browser events; they do not move or remove actual keyboard focus.
Call a native DOM focus method when the UI must physically receive keyboard focus.
Automatic focusing of the first invalid input may fail for custom inputs.

Example: Controlled custom input

import { useForm, useInputControl } from '@conform-to/react';

export function ColorField() {
  const [form, fields] = useForm();
  const color = useInputControl(fields.color);

  return (
    <select
      name={fields.color.name}
      value={color.value ?? ''}
      onChange={(event) => color.change(event.target.value)}
      onFocus={color.focus}
      onBlur={color.blur}
    >
      <option value="">Choose a color</option>
      <option value="red">Red</option>
    </select>
  );
}

This connects a custom or controlled input to Conform by exposing its current value and browser-event helpers.

When to use it

Integrate a custom input

A select, combobox, date picker, or other custom widget needs to submit through a Conform form.

Control a component's value

A controlled component must stay synchronized with Conform's field value.

Dispatch form events

A custom widget needs validation-related input and focus events emitted programmatically.

Interview questions

QWhat does useInputControl return?

The hook accepts field metadata or an options object containing key, name, formId, and initialValue. It returns an input-control object with the current value and event helpers for a custom input.

Follow-up: What does change do beyond updating React state? It updates the value and simulates both the input and change browser events.

QHow do you connect a controlled custom input?

Use control.value as the controlled component's value, control.change when the component reports a new value, and control.focus and control.blur for corresponding simulated events. This lets the custom component participate in Conform's form behavior.

Follow-up: How would you provide real focus? Forward the focus event and call the target element's native focus method.

QWhat is the difference between simulated and actual focus?

focus simulates focus and focusin, while blur simulates blur and focusout. Neither operation changes the browser's actual keyboard focus.

Follow-up: Why might invalid-field focusing need extra work? A custom input may not be the element Conform can focus, so its focus handler should delegate to the desired element.

useForm
Field metadata
control.value
control.change
control.focus
control.blur

Source: Conform / useInputControl. Checked 2026-10-15.