Validate Your Base Component References

What Are Mobile-Ready Components?

A component is considered mobile-ready if it meets the following conditions:

• The component renders correctly when displayed on a mobile device:
  • The component responds to fit within the reduced screen size.
  • The layout of component elements and controls remains sensible.
• The component doesn’t require interactions that are awkward when performed using touch-based input. For example, side-to-side scrolling is awkward or not supported on a narrow phone screen.
• The component doesn’t require constant connections to a server-side controller as you interact with it. For example, auto-suggest look-ups can require a new server request with every search term change you type.
• There are no known issues when the component is used in a non-desktop browser.

The SLDS validator uses the same list of mobile-ready components used by the Component Reference. You can find documentation, examples, and specifications for all base components in the Component Reference of the Lightning Component Library. Select a component, then click Example, Documentation, or Specifications.

Install the SLDS Validator

Base component validation requires version 1.4.4 or later of the SLDS Validator for Visual Studio Code.

Enable or Disable the SLDS Validator

You can globally enable or disable the SLDS validator. In VS Code Preferences, go to Settings | Extensions | SLDS Validator | Salesforce-vscode-slds | Basic: Mobile Validation.

Validate Base Components in Your Code

While you’re coding, the SLDS validator places markers on components that are known to have mobile issues. For example, the validator checks all base component references against its “mobile ready” list. This list shows components that function as well on a limited mobile screen as on a desktop. If the component isn’t on the list, the validator highlights the code that uses that component with a yellow underline. Any base component reference that doesn’t show the yellow underline is ready to go mobile.

To read details about the warning, hover your mouse over the highlighted code.

Resolve Warnings