API Reference / @gtkx/forms / useController

Function: useController()

useController<TFieldValues, TName, TTransformedValues>(props): UseControllerReturn<TFieldValues, TName>

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

Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.

Type Parameters

TFieldValues

TFieldValues extends FieldValues = FieldValues

TName

TName extends string = FieldPath<TFieldValues>

TTransformedValues

TTransformedValues = TFieldValues

Parameters

props

UseControllerProps<TFieldValues, TName, TTransformedValues>

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

Returns

UseControllerReturn<TFieldValues, TName>

field properties, field and form state. UseControllerReturn

Remarks

API • Demo

Example

function Input(props) {
  const { field, fieldState, formState } = useController(props);
  return (
    <div>
      <input {...field} placeholder={props.name} />
      <p>{fieldState.isTouched && "Touched"}</p>
      <p>{formState.isSubmitted ? "submitted" : ""}</p>
    </div>
  );
}