UI Field not documented good enough

[sriechersrc]

Documentation Issue

I was trying to implement a custom tabs component that let's users create new tabs by inserting a name into an input and press a button to add it. However I was really struggling to figure out how to create a ui field with that functionality and how to debug errors i ran into.

Please add some examples to the docs that help with creating custom UIs.

Additional Details

I am using Payload 3.0.0-beta.120

[kendelljoseph]

@sriechersrc I'm sorry you found it challenging to customize the ui.

Alongside the release of v3, we are looking to improve our documentation. It sounds like you think we can benefit from updating these docs.

Let's continue this conversation as a discussion.

[kendelljoseph]

We just added a link on each doc page to edit the markup on Github, or leave feedback!

[sriechersrc]

@kendelljoseph Sorry, I've only just got round to replying.
My main problem with the ui fields is that I cannot pass down a custom state to them. For example the RelationshipField only lets me define a path and a field as a prop. But how do I use it if the path does not exist yet?

I was building a custom ui for selecting a page template that then generates a template page based on the data the user has provided. So I only use the relationship field to select a value that then gets used in the local api.

I need something like this:

      <RelationshipField
        onValueChange={(value) => {
          // Do something with the selected relation
        }}
        defaultValue={someRelationValueAsADefault}
        field={{
          relationTo: 'events',
        }}
      />

I feel like this needs to work with every field, but maybe I am missing something and I need to create a Form instead that submits the new page?