API Reference / @gtkx/forms / Controller

Variable: Controller

const Controller: <TFieldValues, TName, TTransformedValues>(props) => ReactElement

Defined in: node_modules/.pnpm/react-hook-form@7.86.0_react@19.2.8/node_modules/react-hook-form/dist/controller.d.ts:44

Component based on useController hook to work with controlled component.

Type Parameters

TFieldValues

TFieldValues extends FieldValues = FieldValues

TName

TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>

TTransformedValues

TTransformedValues = TFieldValues

Parameters

props

ControllerProps<TFieldValues, TName, TTransformedValues>

the path name to the form field value, and validation rules.

Returns

ReactElement

provide field handler functions, field and form state.

Remarks

API • Demo • Video

Example

function App() {
  const { control } = useForm<FormValues>({
    defaultValues: {
      test: ""
    }
  });

  return (
    <form>
      <Controller
        control={control}
        name="test"
        render={({ field: { onChange, onBlur, value, ref }, formState, fieldState }) => (
          <>
            <input
              onChange={onChange} // send value to hook form
              onBlur={onBlur} // notify when input is touched
              value={value} // return updated value
              ref={ref} // set ref for focus management
            />
            <p>{formState.isSubmitted ? "submitted" : ""}</p>
            <p>{fieldState.isTouched ? "touched" : ""}</p>
          </>
        )}
      />
    </form>
  );
}