Field

Field is the most important primitive in the sheet body set. One component replaces four legacy patterns (FieldPair, TextValue, SmartTextValue, raw label/value markup) that were drifting across portal sheets. Use it anywhere a labeled value renders in a read-mode view.

Use it for

• Sheet body rows showing a labeled value (Status, Owner, Industry, etc.)
• Stat lines on cards (Scraped · 8, Failed · 12)
• Any "label + value" pair where the value is read-only (not editable in this view)
• Empty-state placeholders when a value isn't set ("Not set" muted text by default)

For editable variants, fields belong inside Form with the appropriate input — Field is read-mode only.

Import

import { Field } from '@brikdesigns/bds';

Variants

Stacked (default)

Label above value. Default for sheet body rows where the value needs full width.

<Field label="Status">Active</Field>
<Field label="Industry">Dental — General Practice</Field>

Inline

Label left, value right-aligned. Compact stat row pattern — Status · Active, Scraped · 8.

<Field layout="inline" label="Scraped">8</Field>
<Field layout="inline" label="Status">Active</Field>

Empty states

When children is null, undefined, or empty string, Field renders an inline muted "Not set" by default.

// Default: shows "Not set"
<Field label="Owner" />

// Custom empty message
<Field label="Parent organization" empty="Independent" />

For a section-level empty state (the whole section has no data, not just one field), pass an <EmptyState /> into empty. Use sparingly — one full bordered treatment per section at most.

<Field
  label="Recent activity"
  empty={<EmptyState title="No activity yet" />}
/>

Value types

children accepts any ReactNode — text, TagGroup/Tag, <a> / TextLink, <BulletList>, or compound content.

// With tags
<Field label="Services">
  <TagGroup>
    <Tag size="sm">Cosmetic</Tag>
    <Tag size="sm">Implants</Tag>
  </TagGroup>
</Field>

// With a link
<Field label="Website">
  <a href="https://example.com">example.com</a>
</Field>

// With a bullet list
<Field label="Anti-messages">
  <BulletList items={['No price-first', 'No corporate-clinic']} />
</Field>

// Inside a FieldGrid for side-by-side layout
<FieldGrid columns={2}>
  <Field label="Owner">Nick Stanerson</Field>
  <Field label="Location">Thompson Station, TN</Field>
</FieldGrid>

When not to use

• Don't nest Fields. A value is a value. If you need sub-structure, it belongs in a new SheetSection.
• Don't use Field for editable forms. Field is read-mode. For input, use TextInput (etc.) inside a Form.

Accessibility

• Renders a <div> with the label as a <dt>-equivalent label and the value as the <dd>-equivalent.
• For a true <dl> semantic, wrap a list of Fields in a <dl> element manually — Field doesn't enforce parent shape.

API

Plus all standard <div> HTML attributes (excluding children).

Related

• FieldGrid — equal-column wrapper for laying Fields out side by side
• Form — editable counterpart with title/description/footer
• TagGroup — common Field child for tagged values
• Storybook playground