layout · Normal DOM + Twenty Remote DOM

MetaItem

Label + (optional icon) + value or control. The atom every panel meta row uses.

Replaces the four near-identical helpers (MetaField, LabelledControl, LabelledValue, MetaLine) that used to live inside DealItems and Document Hub demos. Two orientations: inline (label and value side by side, compact) and row (3-column grid with icon · label · value — labels line up when several stack).

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { MetaItem } from '@8maverik8/twenty-design';

Examples

Inline — label + value

OwnerMarta Lindgren

tsx
<MetaItem label="Owner">Marta Lindgren</MetaItem>

Inline — label + control

Months

tsx
<MetaItem label="Months">
  <NumberInput value={12} min={1} onChange={() => {}} />
</MetaItem>

Inline — strong value (totals, key facts)

Line Total€314.00

tsx
<MetaItem label="Line Total" strong>€314.00</MetaItem>

Row — icon · label · value stack

Several MetaItems stacked with orientation="row" so labels line up. This is how DocumentHub renders the CRM snapshot.

NameAcme Manufacturing Ltd.

PeriodApr 2025 – Mar 2026

CurrencyEUR

OwnerMarta Lindgren

tsx
<MetaItem orientation="row" icon={<IconBuilding size={14} />} label="Name">Acme Manufacturing Ltd.</MetaItem>
<MetaItem orientation="row" icon={<IconCalendar size={14} />} label="Period">Apr 2025 – Mar 2026</MetaItem>
<MetaItem orientation="row" icon={<IconCoin size={14} />} label="Currency">EUR</MetaItem>
<MetaItem orientation="row" icon={<IconUser size={14} />} label="Owner">Marta Lindgren</MetaItem>

Variants

orientation

inlinedefaultLabel + value on one line, no fixed grid.

row3-column grid: 18px icon · label (max-content) · value (1fr). Labels line up when several stack inside a Section.

Guidelines

✓

Use orientation="row" when 3+ MetaItems stack and labels should line up.A consistent label column makes meta groups (Company, Deal) scannable.

Pass an Input/NumberInput as the value and also set strong=true.strong only styles plain text/number values; controls keep their own typography.