Add HTML note in UI component form field in Magento 2

Hello Guys!!!

In this blog, we are going to learn how we can display HTML content notice under a form field in the UI component form in Magento 2.

To display your required/desired content or notice, you can add the HTML code in the additionalInfo item in the form field as in the following code:

 <field name="store_url">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Store URL</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="dataScope" xsi:type="string">store_url</item>
                    <item name="required" xsi:type="boolean">true</item>
                    <item name="notice" xsi:type="string" translate="true">
                       Enter store URL name. For example: xyzshop
                    </item>
                    <strong><item name="additionalInfo" xsi:type="string"></strong>
                        <em><![CDATA[<span style="color:green">Your store URL will be like:</span> <a href="https://xyzshop.domain.com">https://xyzshop.domain.com</a>]]></em>
                    <strong></item></strong>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>

When you will add the HTML code in your form field, the result will be displayed in the following image:

Hope this will be helpful.
Thanks 🙂