Row Field - FrogBot Docs

The Row field is presentational. It arranges fields horizontally in the admin panel without adding a property to stored records or generated types. To add one, set type to row and place the fields to arrange in its fields array:

import type { RowField } from 'frogbot'

export const nameRow: RowField = {
  type: 'row',
  fields: [
    {
      name: 'firstName',
      type: 'text',
      required: true,
      admin: {
        width: '50%',
      },
    },
    {
      name: 'lastName',
      type: 'text',
      required: true,
      admin: {
        width: '50%',
      },
    },
  ],
}

The record contains firstName and lastName at the current level. Rows can contain any recursively supported field, including groups, arrays, tabs, and other layout fields.

Config options

Option	Type	Default	Description
`type`	`'row'`	Required	Selects the Row field.
`fields`	`Field[]`	Required	Fields arranged within the row.
`admin`	`object`	—	Standard field admin options except `description`.
`hidden`	`boolean`	`false`	Hides the row and its fields in the admin panel. Their values are still stored and returned by the API.
`custom`	`Record<string, any>`	—	Server-only metadata for your own code and plugins. Use `admin.custom` for data the browser also needs.

Set admin.width on the nested fields to control their relative widths. On narrow screens, the admin panel can stack them to remain usable.

Custom components

import { RowField } from '@frogbotai/ui/admin'
import type { RowFieldServerProps } from 'frogbot'

export const CustomRowField = ({
  clientField,
  path,
  permissions,
  schemaPath,
}: RowFieldServerProps) => {
  return (
    <RowField
      field={clientField}
      path={path}
      permissions={permissions}
      schemaPath={schemaPath}
    />
  )
}

Use RowFieldClientProps when the replacement must run in the browser.