ContextQMD
Back to Copilotkit

Fields

showcase/shell-docs/src/content/reference/bot/components/Fields.mdx

1.60.11.2 KB
Original Source

Overview

Fields lays out a compact two-column grid of label/value cells — status, assignee, priority, dates. Each cell is a Field child.

Import

tsx
import { Fields, Field } from "@copilotkit/bot-ui";

Props

Fields

<PropertyReference name="children" type="BotChildren"> The `Field` cells to lay out. </PropertyReference>

Field

<PropertyReference name="children" type="BotChildren"> One cell's content. Use markdown for the label/value pattern, e.g. `**Status**\nIn Progress` (double asterisks — single `*…*` is GFM italic and renders as italics on Slack). </PropertyReference>

Usage

tsx
<Message>
  <Header>CPK-1234</Header>
  <Fields>
    <Field>**Status**: In Progress</Field>
    <Field>**Priority**: High</Field>
    <Field>**Assignee**: Ada</Field>
    <Field>**Updated**: today</Field>
  </Fields>
</Message>

On Slack

Renders as a section block's fields array — at most 10 fields per section (SLACK_LIMITS.fieldsPerSection), each truncated at 2000 characters (SLACK_LIMITS.fieldText). Slack displays them two per row.

  • Section — single-column body text
  • Table — full tabular data