// QuestionRowLabel.tsx
import React from 'react'
import { useField } from 'payload/components/forms'
export const QuestionRowLabel = ({ data, index, path: arrayFieldPath }) => {
 // arrayFieldPath example: "questions.0"
 const path = `${arrayFieldPath}.question`
 const { value } = useField({ path })
 if (value) {
 // assuming question is a text field inside the array
 return data.question;
 }
 return `Question ${index + 1}`;
}

// example array field with custom component
{
 type: 'array',
 name: 'questions',
 label: 'Questions',
 minRows: 0,
 maxRows: 20,
 admin: {
 components: {
 RowLabel: QuestionRowLabel,
 },
 }
}

src/
├── app/
└── payload/
 ├── components/
 │ └── row-label/
 │ ├── get-row-label.tsx
 │ └── index.tsx
 └── fields/
 └── link.ts

// row-label/index.ts
'use client';
import { useRowLabel } from '@payloadcms/ui';
import { Data } from 'payload/types';
export function RowLabel({ path, fallback }: { path: string; fallback: string }) {
 const { data, rowNumber } = useRowLabel<Data>();
 const fieldValue: any = path.split('.').reduce((value, part) => value?.[part], data);
 return <>{fieldValue || `${fallback} ${rowNumber}`}</>;
}

// get-row-label.tsx
import { RowLabel } from '@/payload/components/row-label';
export const getRowLabel = (path: string, fallback: string) => (
 <RowLabel path={path} fallback={fallback} />
);

// link.ts
import { Field } from 'payload/types';
import { getRowLabel } from '@/payload/components/row-label/get-row-label';
const fields: Field[] = [...];
export const linkArray: Field = {
 name: 'links',
 type: 'array',
 admin: {
 components: {
 RowLabel: () => getRowLabel('text', 'Link'),
 },
 },
 interfaceName: 'FieldLinkArray',
 fields,
};

{
 "data": {},
 "path": "",
 "rowNumber": undefined
}

'use client'
import type { Data } from 'payload'
import { useRowLabel } from '@payloadcms/ui'
function ArrayFieldTitle ({itemPlaceholder}: {itemPlaceholder?: string}) {
 const { data, rowNumber } = useRowLabel<Data>();
 return (
 <>
 {`${ data?.title}` || `${itemPlaceholder}: ${String(rowNumber).padStart(2, '0')}`}
 </>
 )
}
export default ArrayFieldTitle

{
 name: 'myComponents',
 type: 'array',
 label: 'Components',
 minRows: 1,
 admin: {
 components: {
 RowLabel: {
 path: "src/payload/components/shared/ArrayFieldTitle.tsx",
 clientProps: {
 itemPlaceholder: 'placeholder text'
 },
 },
 },
 },
...
...
}

 formBuilderPlugin({
 fields: {
 payment: false,
 },
 formOverrides: {
 fields: ({ defaultFields }) => {
 return defaultFields.map((field) => {
 if ('name' in field && field.name === 'confirmationMessage') {
 return {
 ...field,
 editor: lexicalEditor({
 features: ({ rootFeatures }) => {
 return [
 ...rootFeatures,
 FixedToolbarFeature(),
 HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
 ]
 },
 }),
 }
 }
 if ('type' in field && field.type === 'blocks') {
 return {
 ...field,
 blocks: field.blocks.map((block) => {
 if ('slug' in block && block.slug === 'select') {
 return {
 ...block,
 fields: block.fields.map((thisField) => {
 if ('type' in thisField && thisField.type==='array' && 'name' in thisField && thisField.name === 'options') {
 return {
 ...thisField,
 admin: {
 components: {
 RowLabel: {
 path: 'src/components/shared/ArrayFieldTitle.tsx',
 clientProps: {
 labelPrefix: 'Option: ', // Optional - Prefix text for your option label
 labelValueField: 'label', // Optional - Field to use for each option label - ensure it exactly matches field name you want to use exactly
 },
 },
 },
 }
 };
 }
 return thisField;
 })
 };
 }
 // Return the original block if not the "select" field
 return block;
 }),
 }
 }
 return field
 })
 },
 },
 }),

'use client'
import type { Data } from 'payload'
import { useRowLabel } from '@payloadcms/ui'
function ArrayFieldTitle({ labelPrefix, labelValueField}: { labelPrefix?: string, labelValueField?: string }) {
 const { data, rowNumber } = useRowLabel<Data>();
 const displayOptionValue = labelValueField && data ? data[labelValueField as keyof Data] : undefined;
 return (
 <>
 {`${ labelPrefix ? labelPrefix : (displayOptionValue ? '' : 'Item: ')}${ displayOptionValue || String(rowNumber).padStart(2, '0') }`}
 </>
 )
}
export default ArrayFieldTitle

// file: src/payload/components/shared/BasicRowLabelComponent/index.ts
'use client'
import type { Data, RowLabelComponent } from 'payload'
import { useRowLabel } from '@payloadcms/ui'
function BasicRowLabelComponent ({
 itemPlaceholder, 
 fieldName
}: {
 itemPlaceholder?: string, 
 fieldName: string
}) {
 const { data, rowNumber } = useRowLabel<Data>()
 return (
 {`${ data?.[fieldName]}` || `${itemPlaceholder}: ${String(rowNumber).padStart(2, '0')}`}
 )
}

// file: src/payload/fields/utilities
import type { RowLabelComponent } from 'payload'
const basicRowLabel = ({
 fieldName,
 itemPlaceholder,
}: {
 fieldName: string
 itemPlaceholder?: string
}): RowLabelComponent => {
 return {
 path: 'src/payload/components/shared/BasicRowLabelComponent/index.js#BasicRowLabelComponent'
 clientProps: {
 fieldName: fieldName,
 itemPlaceholder: itemPlaceholder,
 },
 }
}

// example array field using the function
{
 name: 'array',
 type: 'array',
 admin: {
 components: {
 RowLabel: basicRowLabel({ fieldName: 'text', itemPlaceholder: 'Item' }),
 }
 },
 fields: [{name: 'text', type: 'text'}],
}

admin: {
 useAsTitle: 'title',
},