DisplaySet

Show a read-only label and value pair in a two-column or stacked grid, with a placeholder for missing values.

DisplaySet renders a read-only label and its value as a CSS grid built from Text. Use it for detail views such as customer or order summaries. It has no "use client" directive, no state, and no effects, so it can render in server components. It reads theme tokens and should render inside DesignSystemProvider.

Name

Ada Lovelace

Email

ada@example.com

Phone

No phone number

Import#

typescript

import { DisplaySet } from "@reactberry/system/blocks";

Usage#

typescript

import { DisplaySet } from "@reactberry/system/blocks";
import { Box } from "@reactberry/system/elements";

type Customer = { name: string; email: string; phone?: string | null };

export default function CustomerDetails({ customer }: { customer: Customer }) {
  return (
    <Box display="flex" flexDirection="column" gap="s">
      <DisplaySet label="Name" content={customer.name} />
      <DisplaySet label="Email" content={customer.email} />
      <DisplaySet label="Phone" content={customer.phone} placeholder="No phone number" />
    </Box>
  );
}

Examples#

Stacked layout#

flow="column" puts the value below the label, which suits long values.

Delivery address

14 Harbour Street, Leith, Edinburgh

Notes

Deliver to the side entrance.

Custom columns and value styles#

customFlow sets the grid columns, here a fixed 8rem label column. contentProps styles the value. 0 is shown as content, not as the placeholder.

Status

Active

Plan

Team, billed yearly

Seats

API#

DisplaySet#

Prop	Type	Default	Description
`label`	`ReactNode`	—	Rendered as an `h4`. Omitted when falsy.
`content*`	`any`	—	Value to display. When `null` or `undefined`, `placeholder` is shown instead.
`flow`	`"column""row"`	`"row"`	`"row"` places label and value side by side; `"column"` stacks them in a single column.
`customFlow`	`string`	—	`gridTemplateColumns` value used when `flow` is `"row"`. Falls back to `"1fr 1fr"`.
`placeholder`	`ReactNode`	`not set`	Shown when `content` is `null` or `undefined`.
`contentProps`	`Record<string, any>`	`{}`	Spread onto the value `Text`, after its default `fontWeight` and `color`.

All remaining props are spread onto the outer Text (rendered as a div), after its defaults, so they can override display, gap, gridTemplateColumns, color, and fontWeight.

Accessibility#

The label is an h4, so each DisplaySet adds a heading to the document outline.
The value is a plain div; label and value are not linked with ARIA or a description list (dl).

Notes#

The outer element uses color="secondary", fontWeight 700, and gap="xxsmall". The label h4 has m="0" and inherits these styles.
The value uses fontWeight 400 and color="primary", or color="tertiary" when the placeholder is shown.
Only null and undefined trigger the placeholder. Values such as 0, false, and "" are passed through as content; false and "" render nothing.
customFlow is ignored when flow is "column".