Record detail

If your project doesn't have Wisty UI's theme yet, add it once with npx shadcn@latest add @wisty/cosmos. Until then, components keep shadcn's default look. Installation has the details.

fields describes every field, keyed by API name: its label, type and help, with editable: false for a field people can't change and href for a lookup's link. A description also takes the Output field format keys its type reads: scale, minimumFractionDigits and maximumFractionDigits on a number, plus currencyDisplay on a currency, dateStyle on a date, the date and time styles, hour12 and timeZoneName on a datetime, and linkLabel, linkTarget and linkTitle on an email, phone or URL. Record form and Record inline edit take the same descriptions, with what editing needs added. values is the record. Each RecordDetailField draws one field by name, its value formatted by the field's type.

Fields fill each row left to right, then down, as a page layout's rows do. To lay out a page layout loaded at runtime, map its sections to RecordDetailSection and their field names to RecordDetailField, as Record form's Usage does.

• Each section's title is a heading with the toggle inside it: h2 by default, for a record page whose header is the h1. Under another heading, set headingLevel one level below it.
• Each section's fields are a list, one item per field, and each field is a group named by its label. A pencil is named after its field, like "Edit Amount".
• While loading, the block is busy and every value is a placeholder.

• Two columns need about 584px. In a narrower container the fields stack in one column, in the same order.
• Labels follow Salesforce's display density by default (layout="auto"): above the values, and beside them when the page is compact (data-density="compact" on <html>). layout="stacked" or "horizontal" fixes it for one block.
• Beside means from a 48rem screen, whatever the block's own width; below that they stack.

• Name only fields in fields; a name that isn't there throws. Leave out a field the user can't read rather than passing it as null.
• null is an empty field and renders blank. Never pass 0, a dash or "None" for it.
• A percent is a fraction: divide a Salesforce percent field's value by 100. A date is a day ("2026-11-20"), a datetime an instant. A lookup's value is its record ({ id, name }).
• Pass scale from the field's definition, so whole-dollar fields don't show cents. An explicit minimumFractionDigits or maximumFractionDigits wins over it on its end.
• An address is { street, city, state, postalCode, country } and shows on its lines: the street, then "City, State PostalCode", then the country, a missing part dropping out with its comma. A name is { salutation, firstName, middleName, lastName, suffix } on one line. Both follow Salesforce's en-US order for every country and locale. One with no parts renders blank.
• A relative field must be editable: false. A datetime value is an instant, shown in timeZone; a time value is a time of day as Salesforce returns it ("09:30:00.000Z"), never moved by timeZone. A relative value is an instant: pass now, one value for the page, so the text stays the same between the server and the browser.