Output field

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.

A label's help shows help text in a tooltip from an info button beside it.

A lookup shows the related record's name and links to it with href. With loading, the value draws a placeholder and the pencil hides until the record arrives:

An address or a name takes its parts, and a relative time an instant and the now it counts from:

A field's format is its own: its decimals, a currency's code, a date's and a time's style, the clock and the zone's name. The org user's locale, currency and timeZone are the same on every field. A link's words, tab and hover title are linkLabel, linkTarget and linkTitle, and the value stays its address:

The data table formats its columns with the same formatOutputValue, so you can format a value as text anywhere with it. It takes the same format keys, and a data table column takes them in its meta. It writes an address on one line, its parts joined by ", ".

OutputFieldCompactValue draws a value with no field around it, as a table cell or a record header's detail shows it: a true checkbox is a check and a false one blank, and a relative time and a link read as they do in OutputFieldValue. The data table's cells and Record header's fields use it:

• OutputField is slds-form-element slds-form-element_readonly, with slds-form-element_edit and slds-hint-parent when it holds an OutputFieldEdit. layout="horizontal" is slds-form-element_horizontal, and layout="auto" is the same on a compact page (data-density="compact"), Lightning's compact display density.
• OutputFieldLabel is slds-form-element__label, a span in SLDS and a FieldTitle here.
• OutputFieldValue is slds-form-element__static. A checkbox value is slds-checkbox_faux, drawn checked or empty. An address is the static value on its lines.
• OutputFieldEdit is the slds-button_icon with slds-button__icon_hint. A label's help is slds-form-element__icon with its tooltip.

Known gaps:

• An address and a name follow Salesforce's default (en-US) order for every country and locale; Lightning's per-country and per-locale formats aren't drawn.
• An address doesn't link to a map on its own. Pass the map page as href.
• The edited state (slds-is-edited) and its undo button (slds-form-element__undo) belong to the editing form: Record form draws them with highlightChanges, and Record inline edit switches output fields to it.
• Rich text and the user avatar beside a lookup aren't drawn.
• A phone number formats only in en-US and en-CA, as "(425) 555-0155". Other countries' formats aren't drawn.
• lightning-formatted-email's envelope icon isn't drawn. Put an Icon beside the value.
• lightning-formatted-number's significant and integer digits, and lightning-formatted-date-time's separate weekday, era and field options, aren't taken. The four date and time styles cover record pages.

• OutputField is a group named by its label, so a screen reader hears "Annual Revenue" and then the value. Put only the label's words in OutputFieldLabel; help goes in help.
• The pencil is named "Edit" and the label, like "Edit Annual Revenue", and the help button "Help for" and the label. Translate the words with label on OutputFieldEdit and helpLabel on OutputFieldLabel.
• A checkbox value is read as "True" or "False".
• A relative time is read with its date and time after it, like "3 hours ago, Oct 13, 2026, 8:00 AM", which is also its title.
• A linkLabel is the link's name, read in place of the address, so make it say where the link goes. Nothing says a link opens a new tab; say it in the label when it matters.

• Pass plain values. A percent is a fraction: 0.6 shows as 60%, so divide a Salesforce percent field's 60 by 100.
• A date is a day ("2026-11-14") and a datetime an instant; pick the type that matches the field, or a day can move across midnight.
• An address is { street, city, state, postalCode, country } and a name is { salutation, firstName, middleName, lastName, suffix }, any part null or left out. An address shows its street's lines, then "City, State PostalCode", then the country, and a name shows its parts in that order; a missing part drops out with its comma. One with no parts renders blank.
• A relative value is an instant, counted from now. Pass now from the page (one value for every field) for a render that stays the same; without it, the current time is read at render, so a server and a browser render can differ. It counts in the largest unit that fits: under 45 seconds is "now", then minutes, hours under 22, days under 26, months under 11, then years. "Yesterday" means the day before in timeZone.
• Pass null for a field that's empty in the record, which renders blank. Leave out a field people can't read; don't render it blank.
• A url value that starts with /, ./, ../, # or ? links as it is, relative to the page. One with no scheme links with https://, a host with a port included (intranet.acme.com:8443), and so does a protocol-relative //host. One with another scheme than http, https, mailto or tel, like javascript:, shows as text and doesn't link.
• linkLabel, linkTarget and linkTitle apply only to a value that links. linkTarget="_blank" adds rel="noopener noreferrer", and a blank label shows the value.
• A time value is a time of day, "HH:mm", "HH:mm:ss" or "HH:mm:ss.SSS", as Salesforce returns a Time field; a Z or an offset after it is ignored. It never moves with timeZone, and other text shows as stored.
• A phone value of 10 digits, or 11 starting with 1, reads "(425) 555-0155" in an en-US or en-CA locale. Anything else shows as stored, +1 numbers and separators included.
• Pass an amount over 15 digits as a decimal string, like "123456789012345678.90", to show every digit. A number keeps about 15.
• timeZoneName adds the zone after a datetime in the short or medium timeStyle; long and full already name it. A maximum under the minimum reads as the minimum.
• formatOutputValue formats in en-US, USD and UTC unless you pass locale, currency or timeZone, the same defaults as OutputFieldValue. Pass the org user's values to both, or a record page reads one instant on two days.