Stop Auto-Linking: How to Disable Hyperlinks in lightning-formatted-rich-text LWC?

HomeMagulan Duraipandian

Stop Auto-Linking: How to Disable Hyperlinks in lightning-formatted-rich-text LWC?

Magulan Duraipandian

Are you using the powerful lightning-formatted-rich-text component in your Lightning Web Components (LWC), only to find that it automatically turns plain text URLs and email addresses into clickable hyperlinks? While this “linkification” is often helpful, there are many scenarios—such as displaying non-editable text or purely informational content—where you need to disable hyperlinks for a cleaner, non-interactive user experience.

Fortunately, Salesforce LWC provides a simple, dedicated attribute to solve this common problem: disable-linkify.

Understanding Linkification in lightning-formatted-rich-text

The lightning-formatted-rich-text component is designed to securely render rich text or HTML content within a Salesforce application. By default, it intelligently scans the provided text value and automatically converts recognizable patterns (like http://, https://, and email formats) into active links. This default behavior is known as linkification.

The Problem: Unwanted Links

Consider displaying a standard piece of text that includes a URL, perhaps from a data record. If the requirement is simply to show the text exactly as it is, the automatic conversion to a hyperlink can be distracting or even confusing for the end-user, especially if they aren’t meant to click it.

The Solution: Using the disable-linkify Attribute

To prevent the lightning-formatted-rich-text component from creating these automatic hyperlinks, you must use the boolean attribute disable-linkify.

When you include this attribute in your component tag, it explicitly tells the LWC framework to skip the linkification process, rendering any URLs or email addresses as plain, non-clickable text.

Implementation Example in Salesforce LWC

Here is a complete Lightning Web Component example demonstrating the effect of the disable-linkify attribute.

1. HTML Template (sampleLightningWebComponent.html)

In this HTML, we display the same rich text twice: once with the default linkification behavior and once with the disable-linkify attribute applied.

<template>
    <lightning-card title="Disable Hyperlinks Demo">
        <div class="slds-m-around_medium">
            <p><strong>Default (Linkify Enabled):</strong></p>
            <lightning-formatted-rich-text
                value={richtext}
            ></lightning-formatted-rich-text>
        </div>
        <hr/>
        <div class="slds-m-around_medium">
            <p><strong>Disable Hyperlinks (disable-linkify):</strong></p>
            <lightning-formatted-rich-text
                disable-linkify
                value={richtext}
            ></lightning-formatted-rich-text>
        </div>
    </lightning-card>
</template>

2. JavaScript Controller (sampleLightningWebComponent.js)

The JavaScript simply holds the text string containing the URL.

import { LightningElement } from 'lwc';

export default class SampleLightningWebComponent extends LightningElement {
    richtext = 'InfallibleTechie Blog - https://www.infallibletechie.com';
}

3. Configuration File (sampleLightningWebComponent.js-meta.xml)

This standard configuration exposes the LWC for deployment.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>63.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

Key Takeaway

By simply adding disable-linkify to your lightning-formatted-rich-text tag, you gain full control over how URLs and email addresses are rendered, ensuring your Salesforce LWC UI is both precise and non-interactive where needed. Master this trick for cleaner, more predictable rich text display in your LWC development!

Leave a Reply