UI Field - FrogBot Docs

The UI field renders a custom React component among the fields in an edit view. It is presentational only: it does not create a database column or add a property to stored records. Use UI fields for contextual instructions, document actions, preview links, cache controls, or other interfaces that belong beside authored content.

import type { CollectionConfig } from 'frogbot'

export const Orders: CollectionConfig = {
  slug: 'orders',
  fields: [
    {
      name: 'refundAction',
      type: 'ui',
      admin: {
        components: {
          Field: '/components/RefundAction',
          Cell: '/components/RefundStatusCell',
        },
      },
    },
  ],
}

Component paths are resolved through the generated import map. The Field component is required; the Cell component is optional.

Config options

Option	Type	Default	Description
`name`	`string`	Required	Unique field identifier. No value is stored under this name.
`type`	`'ui'`	Required	Selects the UI field.
`label`	`string \| Record<string, string>`	—	Label used where the admin panel lists fields, such as the list-view column selector.
`admin`	`object`	Required	Components and display settings. See Admin options.
`custom`	`Record<string, any>`	—	Server-only metadata for your own code and plugins. Use `admin.custom` for data the browser also needs.

Admin options

UI fields accept these admin options. Unlike data fields, they do not support the rest of the standard field admin options.

Option	Type	Default	Description
`components.Field`	`FrogBotComponent`	—	Component rendered in the edit view. Without it, the UI field renders nothing.
`components.Cell`	`FrogBotComponent`	—	Component rendered in collection list cells.
`components.Filter`	`FrogBotComponent`	—	Client component rendered in the list view’s filter menu. See Filter.
`components.Description`	`FrogBotComponent`	—	Component rendered as the field description.
`components.Diff`	`FrogBotComponent`	—	Component rendered in the version diff view.
`components.[key]`	`FrogBotComponent`	—	Any other key renders that component into the field’s form state, where your components read it from `customComponents`.
`condition`	`(data, siblingData, ctx) => boolean`	—	Shows the field only when it returns `true`. See Conditional logic.
`position`	`string`	Main form	Set to `'sidebar'` to render the field in the edit view’s sidebar.
`width`	`string \| number`	Full width	CSS width, especially within a row.
`disabled`	`boolean \| { field?, column?, filter?, groupBy?, bulkEdit? }`	`{ bulkEdit: true }`	Omits the field from admin areas, as for data fields. UI fields are excluded from bulk editing unless `bulkEdit` is `false`.
`custom`	`Record<string, any>`	—	Metadata available on the server and in the browser.