> ## 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.

# Row Field

> Arrange fields horizontally in the admin panel without changing stored data.

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:

```ts theme={"theme":"tokyo-night"}
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](https://docs.frogbot.ai/fields/overview.md#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

```tsx theme={"theme":"tokyo-night"}
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.


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