How To Add HTML note in UI component form field

We learn how to add HTML notes in UI Component From field in Magento 2.

UI component components are in charge of rendering result page fragments and facilitating JavaScript component-server interactions. It connects the UI’s visual elements and related data processes which are submitted by users. Some UI elements can be named as tables, buttons, or dialogs. Therefore, admins can use grids more easily with the help of UI components. In this article, I will instruct you to create a UI form in Magento 2 by using the UI component.

Using the below codes, you can Add HTML notes in UI Component From field in Magento 2.

Step:1 First We will start with the field in your ui-form:

<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:red">Your store URL will be like:</span> <a href="https://dolphinwebsolution.com">Dolphin</a>]]></em> <strong></item></strong> 
         <item name="validation" xsi:type="array">
            <item name="required-entry" xsi:type="boolean">true</item>
         </item>
      </item>
   </argument>
</field>

Like to Read: Product Labels for Magento 2

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

I Hope, This instruction will be helpful for you.

If you have any difficulties regarding this blog, do consider them posting in the Comments section below!

I’m here to help.

Thank you!

Jigar Patel

Author