---
schema_version: "1"
id: 0e4bbdfd91f06628a787c7096e0c98926f21636083ba3de678bfed173ebc3e30
title: Upgrade Record Components to LWC Technology
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/exp_cloud_component_updates.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.exp_cloud_component_updates.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 596f6df14c8b232e80626b6e2b13446fa3c81a02d1854800983dfadad6c4f8b2
description: Update record components in your Aura sites to run on Lightning Web Component (LWC) technology, and see improved accessibility and stylistic changes.
products:
  - Experiences
release: "264"
---
# Upgrade Record Components to LWC Technology

Update record components in your Aura sites to run on Lightning Web Component (LWC) technology, and see improved accessibility and stylistic changes.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: Salesforce Classic and Lightning Experience</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: <strong>Enterprise</strong>, <strong>Performance</strong>, <strong>Unlimited</strong>, and <strong>Developer</strong> Editions</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Applies to: <a href="https://help.salesforce.com/s/articleView?id=experience.exp_cloud_basics_glossary.htm&amp;type=5&amp;language=en_US" target="_blank">Aura sites</a></td></tr></tbody></table>

![Important](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_important.png)

Important Starting in Winter ’25, the Create Record Form, Record Banner, and Record Detail components are eligible for upgrade. In Summer ’25, the upgrade is enforced for all orgs. We strongly recommend that you test all customized record components before the update.

If your record components use custom CSS, the upgrade can cause breaking changes. We strongly recommend that you turn on the setting and test all your record components, in either a sandbox or an unpublished org, before publishing your changes. The setting can be turned off until Summer ’25.

To upgrade your components:

1. From **Setup** | **Digital Experiences**, go to **Settings**.
2. Under Experience Management Settings, select **Use Lightning web components on your record pages in Aura sites**.

## CSS Equivalents in Aura and LWC Components

When you upgrade your Aura record components to LWC technology, you can expect to see stylistic changes. If your components use custom CSS, use these equivalent CSS selectors to give your upgraded components similar CSS customizations.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small " summary="CSS Selector Equivalents">
          <caption>CSS Selector Equivalents</caption>
          <colgroup>
            <col style="width:20.120724346076457%">
            <col style="width:20.72434607645875%">
            <col style="width:29.376257545271628%">
            <col style="width:29.778672032193153%">
          </colgroup>
          <thead class="slds-text-title_caps ">
            <tr class="">
              <th scope="col" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" id="d84291e129">Section in UI</th>
              <th scope="col" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" id="d84291e132">UI Element</th>
              <th scope="col" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" id="d84291e135">Aura Selector</th>
              <th scope="col" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" id="d84291e138">LWC Equivalent</th>
            </tr>
          </thead>
          <tbody>
            <tr class="">
              <td data-label="Section in UI" class="slds-cell-wrap" rowspan="7" style="vertical-align:top;" headers="d84291e129 ">Record Detail: Headline</td>

              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">General</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x" id="exp_cloud_component_updates_css__codeblock_z5b_xcx_sdc"><a name="exp_cloud_component_updates_css__codeblock_z5b_xcx_sdc"><!-- --></a><code>.forceCommunityRecordHeadline .slds-page-header,
.forceCommunityRecordHeadline .forceRecordLayout.slds-page-header
</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x" id="exp_cloud_component_updates_css__codeblock_jtk_xcx_sdc"><a name="exp_cloud_component_updates_css__codeblock_jtk_xcx_sdc"><!-- --></a><code>.forceCommunityRecordHeadline .slds-page-header,
.forceCommunityRecordHeadline .forceRecordLayout.slds-page-header
</code></pre>
              </td>

            </tr>
            <tr class="">
              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">Field Title</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityRecordHeadline .slds-form-element__label</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityRecordHeadline .slds-text-title</code></pre>
              </td>

            </tr>
            <tr class="">
              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">Field Value</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityRecordHeadline .slds-form-element__control</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityRecordHeadline .slds-text-body--regular</code></pre>
              </td>

            </tr>
            <tr class="">
              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">Actions Ribbon</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityRecordHeadline .actionsContainer</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityRecordHeadline .actionsContainer, .forceCommunityRecordHeadline .chatterActionContainer</code></pre>
              </td>

            </tr>
            <tr class="">
              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">Record Icon</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityRecordHeadline .profilePicWrapper</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityRecordHeadline force-social-record-avatar-wrapper.forceCommunityRecordHeadline records-highlights-icon
</code></pre>
              </td>

            </tr>
            <tr class="">
              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">Record Title</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityRecordHeadline .slds-page-header__title</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityRecordHeadline .slds-page-header__title</code></pre>
              </td>

            </tr>
            <tr class="">
              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">Field Row</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityRecordHeadline .slds-page-header__detail-row</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityRecordHeadline .slds-page-header__detail-row</code></pre>
              </td>

            </tr>
            <tr class="">
              <td data-label="Section in UI" class="slds-cell-wrap" rowspan="3" style="vertical-align:top;" headers="d84291e129 ">Record Detail: View</td>

              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">Section Title</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityRecordDetail .form-element__label</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityRecordDetail .slds-form__item .slds-form-element__label</code></pre>
              </td>

            </tr>
            <tr class="">
              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">Section Text Value</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityRecordDetail .slds-form-element .uiOutputText
</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityRecordDetail .slds-form__item lightning-formatted-text</code></pre>
              </td>

            </tr>
            <tr class="">
              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">Checkbox</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityRecordDetail input.uiInput--checkbox</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityRecordDetail .slds-checkbox</code></pre>
              </td>

            </tr>
            <tr class="">
              <td data-label="Section in UI" class="slds-cell-wrap" rowspan="5" style="vertical-align:top;" headers="d84291e129 ">Record Detail: Edit</td>

              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">Field Title</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.modal-container .forceCommunityRecordDetail .form-element__label</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.uiModal--recordActionWrapper .slds-form__item .slds-form-element__label</code></pre>
              </td>

            </tr>
            <tr class="">
              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">Text Input</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.modal-container .forceCommunityRecordDetail .uiInput--input input</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.uiModal--recordActionWrapper lightning-input input.slds-input</code></pre>
              </td>

            </tr>
            <tr class="">
              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">Select Input</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.modal-container .forceCommunityRecordDetail .uiInput--select .select</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.uiModal--recordActionWrapper lightning-picklist .slds-combobox</code></pre>
              </td>

            </tr>
            <tr class="">
              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">Checkbox</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.modal-container .forceCommunityRecordDetail input.uiInput--checkbox</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.uiModal—recordActionWrapper .slds-checkbox
</code></pre>
                <p>For visual elements: </p>
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>
.uiModal—recordActionWrapper .slds-checkbox .slds-checkbox_faux</code></pre>
              </td>

            </tr>
            <tr class="">
              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">Form Body</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.modal-container .forceCommunityRecordDetail .slds-card</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.uiModal--recordActionWrapper records-lwc-record-layout</code></pre>
              </td>

            </tr>
            <tr class="">
              <td data-label="Section in UI" class="slds-cell-wrap" rowspan="4" style="vertical-align:top;" headers="d84291e129 ">Create Record Form</td>

              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">Save/Confirm Button</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityCreateRecordForm button, .forceCommunityCreateRecordForm .button</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityCreateRecordForm records-form-footer .slds-button.slds-button_brand:not(.slds-combobox__input)</code></pre>
              </td>

            </tr>
            <tr class="">
              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">Footer Section</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityCreateRecordForm .buttonWrapper

</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityCreateRecordForm records-form-footer</code></pre>
              </td>

            </tr>
            <tr class="">
              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">Page Title</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityCreateRecordForm .headerLabel</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityCreateRecordForm h1.headerLabel</code></pre>
              </td>

            </tr>
            <tr class="">
              <td data-label="UI Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e132 ">Form Area</td>

              <td data-label="Aura Selector" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e135 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityCreateRecordForm .forceQuickActionLayout</code></pre>
              </td>

              <td data-label="LWC Equivalent" class="slds-cell-wrap" style="vertical-align:top;" headers="d84291e138 ">
                <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>.forceCommunityCreateRecordForm records-record-layout-block</code></pre>
              </td>

            </tr>
          </tbody>
        </table>