Payload Form Builder Custom Fields

[mabedd]

Hi,
I started using form builder plugin and it seems very nice.

But my question is there any ideas for adding custom fields like for file upload radio or anything ?

[dkirchhof]

While the docs don't mention anything about custom fields, here is a small example:

formBuilderPlugin({
  fields: {
    // ...
    // this is of type Block
    date: {
      slug: 'date',
      labels: {
        singular: 'Date',
        plural: 'Dates',
      },
      fields: [
        {
          name: 'date',
          label: 'Date',
          type: 'date',
        },
      ],
    },
  },
}),

The default fields (like text, email, etc.) have more "inner fields". You can copy them from packages/plugin-form-builder/src/collections/Forms/fields.ts

[WilliamJohnDavisIII]

Thanks @dkirchhof, that worked for me.

What's strange is, the type definition of a custom field for this plugin is Partial<Field>, but passing a Field object throws an error:

TypeError: Cannot read properties of undefined (reading 'concat')

The custom field has to be a Block per the documentation here (and per your advice @dkirchhof). To avoid TypeScript throwing errors, I'm having to add @ts-expect-error to my code.

[mikecebul]

In the admin panel the form "fields" are actually blocks with several fields to select all the options for each individual "field".

[jorgevds]

Could not get a custom form field to be accepted, kept getting an untraceable "Cannot read properties of undefined, reading 'toLowerCase'" when I tried. I added a slug field and that made it compile.

No clue why this works. I don't see slug field used in the source code, and slug is not a valid object member for Field types.