Reusable Field component best practices

[giorgio324]

so um I've been trying to make a reusable Input component so I don't have to copy paste all of the styles everywhere and I made this

import { FieldValues, UseFormRegister, Path } from 'react-hook-form';

interface Props<T extends FieldValues> {
  label: string;
  id: keyof T;
  type?: string;
  register: UseFormRegister<T>;
  error?: string;
}

const FormField = <T extends FieldValues>({
  label,
  id,
  type = 'text',
  register,
  error,
}: Props<T>) => {
  return (
    <div className='flex flex-col gap-4 border p-2'>
      <label className='font-bold' htmlFor={id as string}>
        {label}
      </label>
      <input type={type} id={id as string} {...register(id as Path<T>)} />
      {error && <span className='text-red-500'>{error}</span>}
    </div>
  );
};

export default FormField;

But I feel like this is not the right way to do it or maybe it is at this point I don't know. if anyone has built a similar component I would appreciate help and suggestion

[riotrah]

Context: I've been using r-h-f for a couple years now in an enterprise app as someone who maintains reusable r-h-f stuff (like a clojure translation and reusable components) for less ui-experienced devs in the rest of our org.

I'm actually going to soon construct almost exactly what you have there, error and label included, for our other common form field variations. I think you're 90% doing the right thing.

First, some more subjective stuff:

My first question is: will this stop at an HTMLInputElement like your example? Not any other components, like a radio button group, material-ui autocomplete or a textarea or 3rd party WYSIWYG editor, etc?

If it's just for an HTMLInputElement, I'd probably still name this something different, as the term "Form Field" to me could mean any field in a form, that could use either of register or use/controller. In our team, we named our standard HTMLInputElement component, with a very similar error message and label setup just like yours, Textbox. MUI calls theirs TextField. I think something more specific will allow you to separate out your styling, label, error out of your text input component etc and reuse them for other fields in the future (perhaps as a general wrapper component called FormField that you render your text input component, and future input components, inside of).

But these are subjective takes. If you intend to only ever have what your example shows, and just don't like my suggestions above, what I would at least do is just remove the register prop and references to it, and instead expect consumers to spread the register props instead.

Once your label/error/styling is standardized into whatever component or reusable code you like, you won't have to repeat much, except for {...register(...)} calls, which isn't much typing tbh.

What I'm doing in my org is the following:

• accept all of register's return as props (name, onChange, onBlur, and forwardRef for ref)
• if the above props are missing, especially onChange and ref and this comp is in a form context,
• make a call to useFormContext() and get register out of that, and call it with name
• otherwise make no assumption about whether it's being used in a r-h-f scenmario

[giorgio324]

what I would at least do is just remove the register prop and references to it, and instead expect consumers to spread the register props instead.

yup I think same, passing {...register(...)} like this will be better because whenever I tried to use this component with nested object it would not give me intellisense and I had to copy paste the id so it defeats the purpose of type safety. Thanks for suggestion

[giorgio324]

ok so this is how I rewrote the component

import { useId, forwardRef } from 'react';

interface Props {
  label: string;
  type?: 'text' | 'email' | 'password';
  error?: string;
  placeholder?: string;
}

const UncontrolledInputElement = forwardRef<HTMLInputElement, Props>(
  ({ label, error, placeholder, type, ...props }, ref) => {
    const id = useId();
    return (
      <div className='flex flex-col gap-4 border p-2'>
        <label className='font-bold' id={id}>
          {label}
        </label>
        <input
          type={type}
          placeholder={placeholder}
          id={id}
          ref={ref}
          {...props}
        />
        {error && <span className='text-red-500'>{error}</span>}
      </div>
    );
  }
);

export default UncontrolledInputElement;

and I can use it like this

<UncontrolledInputElement
          label='Book Title'
          error={errors.title?.message}
          {...register('title')}
        />

I can even re use it in formfields

<UncontrolledInputElement
                label={`Description ${index + 1}`}
                error={errors.description?.[index]?.descriptionTitle?.message}
                {...register(`description.${index}.descriptionTitle`)}
              />

[Sajarin-M]

Another way is to use the Controller component in RHF to wrap your input component.

import { ComponentPropsWithoutRef } from 'react';
import { Controller, ControllerProps, FieldPath, FieldValues, useForm } from 'react-hook-form';

type TextInputProps<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = Pick<ControllerProps<TFieldValues, TName>, 'name' | 'control' | 'rules'> &
  ComponentPropsWithoutRef<'input'>;

function TextInput<T extends FieldValues = FieldValues, U extends FieldPath<T> = FieldPath<T>>({
  name,
  control,
  rules,
  onChange,
  onBlur,
  ...rest
}: TextInputProps<T, U>) {
  return (
    <Controller
      name={name}
      rules={rules}
      control={control}
      render={({ field, fieldState }) => (
        <div>
          <input
            {...rest}
            {...field}
            onBlur={(e) => {
              field.onBlur();
              onBlur?.(e);
            }}
            onChange={(e) => {
              field.onChange(e);
              onChange?.(e);
            }}
          />
          {fieldState.error && fieldState.error.message && <div>{fieldState.error.message}</div>}
        </div>
      )}
    />
  );
}

This allows you to use this component with type safety for field names.

export function Form() {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      fieldName: '',
    },
  });

  return (
    <form onSubmit={handleSubmit((values) => console.log(values))}>
      <TextInput
        control={control}
        name='fieldName'
        rules={{ required: { value: true, message: 'Required' } }}
      />
      <input type='submit' />
    </form>
  );
}

[Phibee]

I personally agree @Sajarin-M. @riotrah . And I've been using Controlled component for long a time. for me, it's easy to maintain and adjust. @giorgio324 I'm not a fan of using register. i think things getting messy if you have lots to add on it.

[giorgio324]

I am not using controlled inputs for now, but will give it a try thanks for suggestion

[crazytweeks]

Great. I was using almost same controller approach. But i didn't setup proper types.

import TextField from "@mui/material/TextField";

interface FormInputProps {
  name: string;
  control: any;
  label: string;
  setValue?: any;
}

const FormInputText = ({ name, control, label }: FormInputProps) => {
  return (
    <Controller
      name={name}
      control={control}
      render={({
        field: { onChange, value },
        fieldState: { error },
        formState,
      }) => (
        <TextField
          helperText={error ? error.message : null}
          size="small"
          error={!!error}
          onChange={onChange}
          value={value}
          fullWidth
          label={label}
          variant="outlined"
        />
      )}
    />
  );
};

export default FormInputText;

[BrunoBorges12]

How would it be used with storybook, since control cannot be null?

[Sajarin-M]

Check the third-party bindings section in the RHF documentation to learn more.