UI Field

The UI (user interface) Field gives you a ton of power to add your own React components directly into the Admin Panel, nested directly within your other fields. It has absolutely no effect on the data of your documents. It is presentational-only. Think of it as a way for you to "plug in" your own React components directly within your other fields, so you can provide your editors with new controls exactly where you want them to go.

With the UI Field, you can:

Add a custom message or block of text within the body of an Edit View to describe the purpose of surrounding fields
Add a "Refund" button to an Order's Edit View sidebar, which might make a fetch call to a custom refund endpoint
Add a "view page" button into a Pages List View to give editors a shortcut to view a page on the frontend of the site
Build a "clear cache" button or similar mechanism to manually clear caches of specific documents

To add a UI Field, set the type to ui in your Field Config:

1import type { Field } from 'payload/types'
2
3export const MyUIField: Field = {
4  // ...
5  type: 'ui', 
6}

Config Options

Option	Description
`name` *	A unique identifier for this field.
`label`	Human-readable label for this UI field.
`admin.components.Field` *	React component to be rendered for this field within the Edit View. More
`admin.components.Cell`	React component to be rendered as a Cell within collection List views. More
`admin.disableListColumn`	Set `disableListColumn` to `true` to prevent the UI field from appearing in the list view column selector.
`custom`	Extension point for adding custom data (e.g. for plugins)

* An asterisk denotes that a property is required.

Example

collections/ExampleCollection.ts

1import { CollectionConfig } from 'payload'
2
3export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
fields: [
  {
    name: 'myCustomUIField', // required
    type: 'ui', // required
    admin: {
      components: {
        Field: '/path/to/MyCustomUIField',
        Cell: '/path/to/MyCustomUICell',
      },
    },
  },
],
17}

Deploy your entire stack in one place with Payload Cloud.

Microsoft chose Payload to tell the world about AI.

UI Field

Config Options

Example

Upload Field

On this page