Creating a reusable <TextField> wrapper for form.AppField

[beardsleym]

I'd like to create 1 line reusable inputs so I can use in my code like

<TextField
    name="firstNamessss" // should show ts error
    label="First Name"
    placeholder="Enter first name"
    form={form} // be good to not have to do this
/>

Is this structure possible? It's what I did with React Hook Form, by just looking at the context.

type TextFieldProps = {
  name: string;
  label: string;
  placeholder: string;
  form: ReturnType<typeof useAppForm>;
};

export function TextField({ name, label, placeholder, form}: TextFieldProps) {
  return (
    <form.AppField
      name={name}
      children={(field) => (
        <field.TextInput label={label} placeholder={placeholder} />
      )}
    />
  );
}

[LeCarbonator]

Hi!

If you haven't already, you should read up on Form Composition. It allows you to reduce boilerplate for common components you have.

If you're specifically talking about merging AppField and TextField into one component, that is currently not supported.