Output Field

Use the lightning-output-field component in lightning-record-view-form to display the value of a record field on a Salesforce object. Use the field-name attribute to specify the API field name.

For standard and custom objects, find the field names in Lightning Experience from Setup > Object Manager > (object-name) > Fields & Relationships. Standard object fields are also documented in Standard Objects. See Supported Objects in the lightning-record-view-form documentation for usage considerations about objects.

A lightning-output-field component displays the field value in the correct format based on the field type. You must provide the record ID in the wrapper lightning-record-view-form component, and specify the field name on lightning-output-field. If field-name references an email address, phone number, lookup, or URL, then a clickable link is displayed.

In orgs that support multiple languages, lightning-output-field automatically shows the translated labels and picklist values.

This component implements styling from input (readonly state) in the Lightning Design System.

To create a record detail layout, wrap the fields with lightning-record-view-form and provide the record ID. You don't need additional Apex controllers as data refresh happens automatically with Lightning Data Service.

If you reference an invalid field, no output label or value is rendered.

For more information, see the lightning-record-view-form documentation.

The user's locale settings determine the display formats for numbers, percentages, and date and time.

For currency fields, the currency locale for the org determines the display format.

Besides field values, lightning-output-field displays the localized labels and help text for the fields based on their metadata, which are defined by your Salesforce admin.

Date and time field values are retrieved from the platform along with the user's Salesforce locale and timezone settings and passed to lightning-output-field. The component doesn't alter the retrieved date and time values, which are stored in UTC. It displays the date and time formatted according to the user's locale setting, and calculated for the user's timezone setting. For example, let's say a user sets their Salesforce timezone as GMT+08:00 with a Japanese locale. The user modifies a record, and then the Last Modified By field displays 2025/07/04 4:12 AM. For another user whose Salesforce timezone is GMT-07:00 with an English (United States) locale, the same field displays as 7/3/2025 1:12 PM. The same server-recorded date and time can appear differently to users with different locale and timezone settings.

In Lightning Experience, the locale corresponds to the Locale field on the Language & Time Zone page in the user's profile settings. For example, if field-name references a date and time value, then the default output value contains the date and time in the user's locale.

In LWR sites, the site configuration determines the field's language and locale. In enhanced LWR sites, the site visitor's browser timezone determines the field's timezone. In non-enhanced LWR sites, the hosting Salesforce org's timezone determines the field's timezone.

lightning-output-field inherits the display density from the enclosing parent form. To override the display density of the parent form, use the variant attribute. When the parent form uses the compact density, you can reduce the whitespace between the label and field using the slds-form-element_1-col class on lightning-output-field.

For more information, see the lightning-record-view-form documentation.

lightning-output-field supports fields on objects that are UI API compliant. For supported objects, see the User Interface API Developer Guide.

Fields that have a spanning relationship aren't supported by lightning-output-field. The fields specified must be associated with only one object. A field such as Contact.Account.Ownership is a cross-object reference between the Contact object and the Account object, and can't be displayed in the form.

The supported field data types are:

• Address: Displays the formatted address without a link to Google Maps.
• Auto Number: Displays a string that represents the unique number of the record.
• Checkbox: Displays a checkmark if selected or an empty dotted checkbox if not selected.
• ComboBox: Displays text of the selected value.
• Currency: Displays the formatted currency based on the user's locale.
• Date: Displays the formatted date based on the user's locale.
• Date/Time: Displays the formatted date and time based on the user's locale.
• Email: Displays the email address with the mailto: URL scheme.
• Encrypted String: Displays masking characters to represent an encrypted string such as a password.
• Formula: Displays the result of the formula based on its data type.
• Geolocation: Displays latitude and longitude in decimal degrees format: 90.0000, 180.0000.
• Lookup: Displays a relationship between two records, for example, the account ID associated with a contact record. Lookup fields show the current value of the field as a link to the record that it refers to. If the link address can't be computed for any reason, a plain text value is displayed. The mouseover behavior that displays a hover panel of record details is not supported. Lookups are not supported for the OwnerId, CreatedBy, and LastModifiedBy fields. Dependent lookups and external lookups are also not supported. On user lookup fields, the lookup value is displayed without a user icon.
• Name: Displays the formatted name.
• Number: Displays the integer or double.
• Percent: Displays the percentage number.
• Phone: Displays the phone number with the tel: URL scheme.
• Picklist and multi-select picklist: Displays picklist values separated by a semi-colon.
• Text: Displays text up to 255 characters.
• Text (Encrypted): Displays the encrypted text.
• Text Area: Displays multi-line text up to 255 characters.
• Text Area (Long): Displays multi-line text up to 131,072 characters.
• Text Area (Rich): Displays rich text such as bold or underline text, lists, and images. Unsupported tags and attributes are removed and only their text content is displayed. For more information on supported tags, see Rich Text Editor in Salesforce Help.
• Time: Displays the formatted time based on the user's locale.
• URL: Displays a link that opens in the same browser window when it's clicked.

lightning-output-field must be a child of lightning-record-view-form. You can't nest it in another component like lightning-layout though you can nest it in a <div> container within lightning-record-view-form.

When using lightning-output-field, the field label for certain fields can differ from those displayed on a standard record page. For example, the Name field on the opportunity object displays "Name" instead of "Opportunity Name" while the Name field on the account object displays "Account Name".

This component has usage differences from its Aura counterpart. See Base Components: Aura Vs Lightning Web Components in the Lightning Web Components Developer Guide.