We use cookies to improve your experience. By continuing, you agree to our use of cookies. Learn More
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:
// ...Other fields{label: "Image Gallery",name: "gallery",type: "object",list: true,ui: {itemProps: (item) => {// Field values are accessed by item?.<Field name>return { label: item?.title };},},fields: [{label: "Title",name: "title",type: "string",},{ label: "Image", name: "image", type: "image" },{label: "Size",name: "size",type: "string",options: ["sm", "med", "lg", "xl"],},],};
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:
// ...Other fields{label: "Image Gallery",name: "gallery",type: "object",list: true,ui: {itemProps: (item) => {if (item?.title === "Dog") {return { label: item?.title, style: { backgroundColor: "blue" } };}// Field values are accessed by item?.<Field name>return { label: item?.title };},},fields: [{label: "Title",name: "title",type: "string",},{ label: "Image", name: "image", type: "image" },{label: "Size",name: "size",type: "string",options: ["sm", "med", "lg", "xl"],},],}
which will render as:
For those who prefer to learn from video, you can check out a snippet on "Customizing List Items" from our "TinaCMS Deep Dive" series.
© TinaCMS 2019–2025