Simplify Fields access

[glass citrus]

Currently code must be like this

<form.AppField
          name="name"
          children={(field) => (
            <field.TextField
              label="What repeats?"
              placeholder="Kitchen at night"
            />
          )}
        />

but I would love to have quick access just as

<form.TextField name="name"
              label="What repeats?"
              placeholder="Kitchen at night"
            />

is there a way to do it nicely?

something like this?

function useForm<T>(options: FormOptions<T>) {
  const form = useAppForm(options);
  
  return {
    ...form,
    TextField: ({ name, ...props }: { name: keyof T } & TextFieldProps) => (
      <form.AppField
        name={name}
        children={(field) => <field.TextField {...props} />}
      />
    ),
    RadioCardField: ({ name, ...props }) => (
      <form.AppField
        name={name}
        children={(field) => <field.RadioCardField {...props} />}
      />
    ),
  };
}

[hallow coral]

no, because AppField is about the field's logic and TextField is about the UI.

We keep them separate because it lets us have control over how to type things. Otherwise, you'd need a way to explicitly list generics yourself which isn't convenient

[glass citrus]

Thank you for quick reply, do you think that wrapper like that is bad, we want to simplify DX for consumers in enterprise application...

[hallow coral]

Depends. Who are the consumers? Is the snippet you sent the desired end goal?

[glass citrus]

currently we are using final-form and with <Form> <TextField name="name" /></Form> so I'm thinking to keep DX similar just to use it from form or even form.fields.TextField so I don't need to AppField as wrapper to be visible in JSX, if that make sense