Custom List Rendering

If list is true the default label is often not very useful to editors.

The label used for list items can be customized using the itemProps function. The main use-case for this is to provide a custom label based on the data in the component.

For example, to use the title field as the label for this image gallery collection:

which will render as:

Although providing a custom label is the most common use-case of itemProps, the className and style props can also be returned to allow custom styling of the list component.

For example:

which will render as:

Video Tutorial

For those who prefer to learn from video, you can check out a snippet on "Customizing List Items" from our "TinaCMS Deep Dive" series.