---
schema_version: "1"
id: 665154cbd531232e69a96f854f08a41e789ee554e0c74710f43fa731eb756fe1
title: Output Field
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/outputField/lightning-output-field.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-output-field.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 89a4e09e418543a1889e678b4a800396b27ad7a7e743e85bece3ed56808d82d3
products:
- Lightning Component Reference
---
# Output Field
**`lightning-output-field`**
Represents a read-only display of a label, help text, and value for a field on a Salesforce object.
**For Use In**
Lightning Experience, Experience Builder Sites, Salesforce Mobile App
::::::tabset{tabs='[ "Develop", "Specifications"]'}
:::::tab
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](https://developer.salesforce.com/docs/atlas.en-us.object_reference.meta/object_reference/sforce_api_objects_list.htm).
See [Supported Objects in the `lightning-record-view-form` documentation](/docs/platform/lightning-component-reference/guide/lightning-record-view-form.html#supported-objects) 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.
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`](/docs/platform/lightning-component-reference/guide/lightning-record-view-form.html) documentation.
Here's an example of a record view that shows a contact record
with several contact fields.
```html
```
## Design
`lightning-output-field` implements the form element blueprint in the Salesforce Lightning Design System (SLDS).
| | SLDS 1 | SLDS 2 |
| :------------- | :--------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------- |
| **Design** | [Form Element (view mode/static)](https://v1.lightningdesignsystem.com/components/form-element/#View-ModeStatic) | [Form Element (view mode/static)](https://www.lightningdesignsystem.com/2e1ef8501/p/96252b-form-element/b/76ea32/t/ea06bd3eb3) |
| **For Use In** | Lightning Experience, Experience Builder sites, Salesforce mobile app | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |
## User Locale Settings
The [user's locale settings](https://help.salesforce.com/s/articleView?id=xcloud.usersetup_lang_time_zone.htm) determine the display formats for numbers, percentages, and date and time.
For currency fields, [the currency locale](https://help.salesforce.com/s/articleView?id=xcloud.admin_currency_set_locale.htm) 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.
## Set the Form Display Density
`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](/docs/platform/lightning-component-reference/guide/lightning-record-view-form.html) documentation.
## Field Types Supported
`lightning-output-field` supports fields on objects that are UI API compliant. For supported objects, see the [User Interface API Developer Guide](https://developer.salesforce.com/docs/atlas.en-us.uiapi.meta/uiapi/ui_api_get_started_supported_objects.htm).
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](https://help.salesforce.com/articleView?id=fields_using_html_editor.htm).
- 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.
## Usage Considerations
`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 `` 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](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
:::::
:::::tab
::component-specification{component="outputField" model="lwc" namespace="lightning"}
:::::
::::::