77 lines
2.3 KiB
Markdown
77 lines
2.3 KiB
Markdown
---
|
|
title: "Row Field"
|
|
aliases: [row-field, payload-row]
|
|
tags: [payloadcms, fields, layout, admin-ui]
|
|
sources: [raw/fields__row.md]
|
|
created: 2026-05-15
|
|
updated: 2026-05-15
|
|
---
|
|
|
|
## Overview
|
|
|
|
The Row Field is a **presentational-only** layout field — it has no database column and stores no data. It arranges nested fields **horizontally** side by side in the Admin Panel.
|
|
|
|
## Config Options
|
|
|
|
| Option | Required | Description |
|
|
|--------|----------|-------------|
|
|
| `type` | yes | Must be `"row"` |
|
|
| `fields` | yes | Array of field configs to render side by side |
|
|
| `admin` | no | Admin options (excludes `description`, `readOnly`, `hidden`) |
|
|
| `custom` | no | Plugin extension data |
|
|
|
|
## Minimal Example
|
|
|
|
```ts
|
|
import type { Field } from 'payload'
|
|
|
|
export const MyRowField: Field = {
|
|
type: 'row',
|
|
fields: [
|
|
// fields rendered side by side
|
|
],
|
|
}
|
|
```
|
|
|
|
## Width Control
|
|
|
|
Use `admin.width` on nested fields to control proportions:
|
|
|
|
```ts
|
|
{
|
|
type: 'row',
|
|
fields: [
|
|
{
|
|
name: 'label',
|
|
type: 'text',
|
|
required: true,
|
|
admin: { width: '50%' },
|
|
},
|
|
{
|
|
name: 'value',
|
|
type: 'text',
|
|
required: true,
|
|
admin: { width: '50%' },
|
|
},
|
|
],
|
|
}
|
|
```
|
|
|
|
## Key Takeaways
|
|
|
|
- **No DB column** — purely presentational; does not appear in data schema or API responses
|
|
- **Horizontal layout** — all fields in `fields[]` render in a single row
|
|
- **Width via nested fields** — set `admin.width` on children (e.g. `'50%'`, `'33%'`) to control split
|
|
- **Combine with Group/Collapsible** — Row works inside [[wiki/payloadcms/fields-group|Group]] or [[wiki/payloadcms/fields-collapsible|Collapsible]] for complex layouts
|
|
- **Admin-only options** — `description`, `readOnly`, and `hidden` are not available on the Row itself; apply them to individual nested fields
|
|
|
|
## Related
|
|
|
|
- [[wiki/payloadcms/fields-group|Group Field]] — named grouping that creates a nested property in data
|
|
- [[wiki/payloadcms/fields-collapsible|Collapsible Field]] — collapsible layout container, also presentational
|
|
- [[wiki/payloadcms/fields-overview|Fields Overview]] — admin options, custom components, virtual fields
|
|
- [[wiki/payloadcms/custom-components-authoring|Custom Components — Authoring Guide]] — replacing field components
|
|
|
|
## Sources
|
|
|
|
- `raw/fields__row.md` — https://payloadcms.com/docs/fields/row
|