> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frogbot.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# UI Field

> Place a custom React component among collection fields without storing data.

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.

```ts theme={"theme":"tokyo-night"}
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](#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](https://docs.frogbot.ai/fields/overview.md#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](https://docs.frogbot.ai/fields/overview.md#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](https://docs.frogbot.ai/fields/overview.md#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](https://docs.frogbot.ai/fields/overview.md#admin-options). UI fields are excluded from bulk editing unless `bulkEdit` is `false`. |
| `custom` | `Record<string, any>` | — | Metadata available on the server and in the browser. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.