Guides
Create a new form field

Create a new form field

Why?

Allows to integrate a new type of field with React Hook Form.

How? Create a new FormField type (recommended)

Define your Field

In the src/components/Form directory, create a new folder FieldYourType with an index.tsx file.

src/components/Form/FieldYourType/index.tsx
import { ReactNode } from "react";
 
import { Controller, FieldPath, FieldValues } from "react-hook-form";
 
import { CustomComponent } from "@/components/CustomComponent";
 
import { FieldCommonProps } from "../FormField";
import { FormFieldError } from "../FormFieldError";
import { FormFieldHelper } from "../FormFieldHelper";
import { FormFieldItem } from "../FormFieldItem";
import { FormFieldLabel } from "../FormFieldLabel";
 
export type FieldYourTypeProps<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
  type: "your-type";
  label?: ReactNode;
  helper?: ReactNode;
} & FieldCommonProps<TFieldValues, TName>;
 
export const FieldYourType = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>(
  props: FieldYourTypeProps<TFieldValues, TName>
) => {
  return (
    <Controller
      {...props}
      render={({ field }) => (
        <FormFieldItem>
          {!!props.label && <FormFieldLabel>{props.label}</FormFieldLabel>}
          <CustomComponent {...field} />
          {!!props.helper && <FormFieldHelper>{props.helper}</FormFieldHelper>}
          <FormFieldError />
        </FormFieldItem>
      )}
    />
  );
};

Declare your Field in the FormField file

In the src/components/Form/FormField.tsx file, add the props and the component for your type.

src/components/Form/FormField.tsx
/* ... */
 
import { FieldYourType, FieldYourTypeProps } from "./FieldYourType";
 
/* ... */
 
export const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>(
  props:
    | FieldCustomProps<TFieldValues, TName>
    | FieldTextProps<TFieldValues, TName>
    /* ... */
    | FieldYourTypeProps<TFieldValues, TName>
  // -- ADD NEW FIELD PROPS TYPE HERE --
) => {
  const getField = () => {
    switch (props.type) {
      case "custom":
        return <Controller {...props} />;
 
      case "text":
      case "email":
      case "number":
      case "tel":
        return <FieldText {...props} />;
 
      /* ... */
 
      case "your-type":
        return <FieldYourType {...props} />;
 
      // -- ADD NEW FIELD COMPONENT HERE --
    }
  };
 
  /* ... */
};

Use your new Field in a form

<Form {...form}>
  <FormField
    control={form.control}
    type="your-type"
    name="field-name"
    label="Field Label"
  />
</Form>

Storybook and tests

It is good practice to create docs.stories.tsx and FieldYourType.spec.tsx files in the src/components/Form/FieldYourType folder for documenting and testing your new field type.

How? Use the FormField custom type

Use the custom type of the FormField component to use an abitrary component on the fly. If you need a reusable component, take the Create a new FormField type approach.

<Form {...form}>
  <FormField
    control={form.control}
    type="custom"
    name="field-name"
    render={({ field }) => (
      <FormFieldItem>
        <FormFieldLabel>Field Label</FormFieldLabel>
        <CustomComponent {...field} />
        <FormFieldError />
      </FormFieldItem>
    )}
  />
</Form>