---
schema_version: "1"
id: 71e0f6fbc899267d7468e83d535b91fc451615ae6c0c2486d02d61c962d9db3f
title: Standard Visualforce Components and Base Lightning Web Components Side by Side
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/intro/pages-intro-vf-lwc-side-by-side.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-intro-vf-lwc-side-by-side.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 3d1dd8a3f751a51f6bbd2f8f5edc82d28b5732619349583d4eb066ce691f3ca0
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# Standard Visualforce Components and Base Lightning Web Components Side by Side

Use this table to find the equivalent base Lightning web component for a specific standard Visualforce component.

| Visualforce component             | Lightning web component                                                                                                                                  |
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `apex:pageBlock`                  | `lightning-card`                                                                                                                                         |
| `apex:pageBlockButtons`           | Set actions slot on `lightning-card`                                                                                                                     |
| `apex:pageBlockSection`           | `lightning-accordion` and `lightning-accordion-section`                                                                                                  |
| `apex:pageBlockSectionItem`       | `lightning-layout` and `lightning-layout-item`                                                                                                           |
| `apex:toolbarGroup`               | `lightning-layout` and `lightning-layout-item`                                                                                                           |
| `apex:panelGrid`                  | `lightning-layout` and `lightning-layout-item`                                                                                                           |
| `apex:panelGroup`                 | `lightning-layout` and `lightning-layout-item`                                                                                                           |
| `apex:tabPanel`                   | `lightning-tabset`                                                                                                                                       |
| `apex:tab`                        | `lightning-tab`                                                                                                                                          |
| `apex:repeat`                     | `template for:each or iterator`                                                                                                                          |
| `apex:pageBlockTable`             | `lightning-datatable`                                                                                                                                    |
| `apex:dataTable`                  | `lightning-datatable`                                                                                                                                    |
| `apex:inlineEditSupport`          | `lightning-datatable` with inline editing in editable columns                                                                                            |
| `apex:image`                      | `lightning-platform-resource-loader`                                                                                                                     |
| `apex:stylesheet`                 | `lightning-platform-resource-loader`                                                                                                                     |
| `apex:includeScript`              | `lightning-platform-resource-loader`                                                                                                                     |
| `apex:map`                        | `lightning-map`                                                                                                                                          |
| `apex:form`                       | `lightning-record-form`, `lightning-record-view-form`, and `lightning-record-edit-form`                                                                  |
| `apex:input`                      | `lightning-input` and `lightning-slider`                                                                                                                 |
| `apex:inputCheckbox`              | `lightning-input` type="checkbox" or `lightning-input` type="checkbox-button"                                                                            |
| `apex:inputFile`                  | `lightning-input` type="file" or `lightning-file-upload`                                                                                                 |
| `apex:inputHidden`                | `lightning-input` class="slds-hide"                                                                                                                      |
| `apex:inputSecret`                | `lightning-input` type="password"                                                                                                                        |
| `apex:inputText`                  | `lightning-input` type="text"                                                                                                                            |
| `apex:inputTextArea`              | `lightning-textarea`                                                                                                                                     |
| `apex:inputField`                 | `lightning-input-field`                                                                                                                                  |
| `apex:selectCheckboxes`           | `lightning-checkbox-group`                                                                                                                               |
| `apex:selectList`                 | `lightning-combobox` or `lightning-dual-listbox`                                                                                                         |
| `apex:selectRadio`                | `lightning-radio-group`                                                                                                                                  |
| `apex:outputLabel`                | Set label attribute on `lightning-input`                                                                                                                 |
| `apex:outputField`                | `lightning-output-field`                                                                                                                                 |
| `apex:outputLink`                 | `lightning-formatted-url`                                                                                                                                |
| `apex:outputText`                 | `lightning-formatted-datetime`, `lightning-formatted-number`, `lightning-formatted-rich-text`, `lightning-formatted-text`, or `lightning-formatted-time` |
| `apex:commandButton`              | `lightning-button`, `lightning-button-stateful`, `lightning-button-icon`, or `lightning-button-icon-stateful`                                            |
| `apex:commandLink`                | `lightning-button` with bare variant                                                                                                                     |
| `apex:pageMessage`                | `lightning-platform-show-toast-event`                                                                                                                    |
| `apex:messages` or `apex:message` | Custom validity on `lightning-input`                                                                                                                     |
| `apex:pageMessages`               | Automatic for `lightning-record-form`. Use `lightning-messages` in `lightning-record-view-form` or `lightning-record-edit-form`                          |

**See Also**

- [_Salesforce Developers Blog:_ New Resources for Moving from Visualforce to Lightning Web Components](https://developer.salesforce.com/blogs/2020/07/new-resources-for-moving-from-visualforce-to-lightning-web-components.html)
- [_Lightning Component Reference_: Components](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/components.html)