Row Field

The Row Field is presentational-only and only affects the Admin Panel. By using it, you can arrange Fields next to each other horizontally.

Admin Panel screenshot of a Row field

To add a Row Field, set the type to row in your Field Config:

1import type { Field } from 'payload'
2
3export const MyRowField: Field = {
4  // ...
5  type: 'row',
6  fields: [
7    // ...
8  ],
9}

Config Options

Option	Description
`fields` *	Array of field types to nest within this Row.
`admin`	Admin-specific configuration excluding `description`, `readOnly`, and `hidden`. More details.
`custom`	Extension point for adding custom data (e.g. for plugins)

* An asterisk denotes that a property is required.

Example

collections/ExampleCollection.ts

1import type { CollectionConfig } from 'payload'
2
3export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
fields: [
  {
    type: 'row', // required
    fields: [
      // required
      {
        name: 'label',
        type: 'text',
        required: true,
        admin: {
          width: '50%',
        },
      },
      {
        name: 'value',
        type: 'text',
        required: true,
        admin: {
          width: '50%',
        },
      },
    ],
  },
],
29}

See what others are building with Payload.

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Get the resources you need to start building today

Microsoft chose Payload to tell the world about AI.

Row Field

Config Options

Example

Select Field