Placeholder / description for fields

[SuddenDev]

Another day, another feature request. 🙃
I think it would be a great little improvement to add a description or placeholder config to make fields more descriptive.
Any thoughts?

[jmikrut]

It’s surprising how well aligned we are. This is already in the works!

Fairly easy one too. ETA 2 weeks!

[SuddenDev]

Haha, perfect. Looking forward to it!
Cheers!

[jmikrut]

Wait - clarifying question. What we are working on is a placeholder field type, which would allow you to render a custom React component inline with your other components, wherein you could do whatever you want. Explanatory description text, third party integration, heading, etc. This field would have no impact on the data. Just presentational.

Is that what you’re thinking too?

Or do you mean to add another property to all fields called description that would render out some small text maybe below a field? In addition to the field label? I think Contentful has something like that.

Both seem like good features.

[SuddenDev]

I was thinking of what a input has as a prop (placeholder="..."). If it's rendered beneath the input or in it, is not that important; to me at least. (Only in the admin menu) So I think it aligns more with the later use of a description.

...
fields: [
    {
      name: "pretitle",
      type: "text",
      label: "Pretitle",
      admin: {
        description: "A useful description of the field" // <- either in admin or on the same level as the label
        width: "50%",
      },
    },
...
...
]

I do think your idea of a placeholder field type would also be very cool, although I can't really think of a usecase right now, where I don't want to use it with data.

[DanRibbens]

In other systems I've seen the text below the field called help. It would be nice if it that were a string or function so that you could give it static text or a function that returns a string or a custom component to render.

[richardvanbergen]

Thank you guys, been waiting for this one for a while.

[Ontopic]

Any update on this one? I'm still using placeholders to instruct editors, which is not ideal if they edit an existing article 🌚

[DanRibbens]

I am picking this one up. I started on it today and I will have a PR in the next day or two. Thanks for checking in @Ontopic.

[DanRibbens]

This is close to done, but I wanted to get some feedback on implementation details before completing it.
#241

I've got it so that the field config admin now takes a description which can be either text to display or a function that takes the input value and return a string. For custom components I've added the admin.components.Description which will render a React component. I was weighing the pros and cons of putting all the custom components together in the field config vs having a single place for the description to go. I'd like feedback as to whether that was the right call or not and I can take it back to a single property.

What do we think?

[Ontopic]

That sounds like a very nice solution, especially like the idea of being able to use a function that receives the input value.
I can foresee situations where a separate field could be "easier" (see below), but this way things stay neatly packed and more logical imho.

Thanks!

semi-related;
I use a hook from the internals of Payload now to update the placeholder value of a slug field live while the editor changes the title. Gives them a nice idea of what's going on. I would like to implement this in more places. Would this mean I'd be able to do that on the description now? If that's the case, then this could be extended into what would be next on my wishlist ;)

[pupugit]

This would also be a great addition for collections and globals to set some explanatory text there too (maybe shown below the title/label of the collection when in the collection overview page. Something like that (please ignore the used font-type and font-size):

[DanRibbens]

@pupugit This is wonderful, I'm going to work that in to the same PR.

[Ontopic]

☺️

[DanRibbens]

v0.7.9 released! 😄

[pupugit]

Thanks for the quick implementation. Works like a charm for fields and collections/globals.

[jmikrut]

Hey all,

In addition to the description feature that we've already released, I also just opened a PR with a new field type that allows for the addition of completely custom React components within your field layouts. There's a little overlap with descriptions here, but this new field type is more powerful and more semantic in certain cases because you can now inject larger descriptions, instructions, etc. or even buttons for users to perform actions directly in the admin UI.

Take a look at the WIP docs page for this field in the PR for more!

[pupugit]

Oh! Yeah this would be very amazing and the example usecases are something which I guess many people would enjoy having as an option for some extended logic not bound to a database field.