How can I add a small text under a field in Magento 2 using ui components.
Using Magento\Framework\Data\Form I could do this:

/** @var \Magento\Framework\Data\Form $form */
$form = $this->formFactory->create();
$fieldset = $form->addFieldset(
        'legend' => __('Some legend here'),
        'class'  => 'fieldset-wide'
        'name'      => 'name',
        'label'     => __('Name'),
        'title'     => __('Name'),
        'note'      => __('Some note here')

The code above would produce this (notice the text under the field).

How can I achieve the same thing using form ui-components?
I have the form defined like this:

<field name="name">
    <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">Name</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">[entity]</item>
            <item name="sortOrder" xsi:type="number">10</item>
            <item name="dataScope" xsi:type="string">name</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>

I tried adding <item name="note" xsi:type="string" translate="true">Some note here</item> but, guess what?

3 Answers 3


You can achieve this using following tag.

<item name="notice" xsi:type="string" translate="true">Some note here</item>
  • Thanks. It works. I added translate="true" just to make the translatable phrase collector script pick this up also.
    – Marius
    Commented May 26, 2016 at 7:22
  • @Marius do you know how to use html code in notice? Commented Jun 20, 2017 at 8:08
  • 1
    @SergeyKorzhov try <item name="notice" xsi:type="string" translate="true"><![CDATA[Some note <a href="https://google.com">here</a>]]></item>
    – Marius
    Commented Jun 20, 2017 at 8:14
  • @Marius i did before asking. does not work. the funny thing is that html works just fine in system.xml even without CDATA. Commented Jun 20, 2017 at 8:21
  • In this notice , shall I give dynamic data inbetween messages ?? Is this possible @Marius
    – Jaisa
    Commented Jan 17, 2018 at 13:20

I had a really annoying time figuring out how to get html to render in a notice object. There have been two solutions I have figured out. I know this could possibly be a comment, but I figured other people would be interested in this functionality as well.

  1. Create a new html element that renders the notice as HTML instead of text

the original element can be found at /vendor/magento/module-ui/view/base/web/templates/form/field.html

Copy that into your module with a path of view/base/web/template/form/field-html-notice.html or something similar (please note the templates directory being changed to template that is intentional and required for custom template files)

Now in your new field-html-notice.html file, you can modify the html file to load the $data.notice using html and skip the span altogether. (of course if you're looking to translate your html, you'll need to customise this solution to have some workaround)

The solution would be to take this template and modify

    <!-- /vendor/magento/module-ui/view/base/web/templates/form/field.html:35 -->
    <div class="admin__field-note" if="$data.notice" attr="id: noticeId">
        <span translate="notice"/>

    <div class="admin__additional-info" if="$data.additionalInfo" html="$data.additionalInfo"></div>

to look something more like this:

    <!-- view/base/web/template/form/field-html-notice.html:35 -->
    <div class="admin__field-note" if="$data.notice" attr="id: noticeId" html="$data.notice"></div>

    <div class="admin__additional-info" if="$data.additionalInfo" html="$data.additionalInfo"></div>

Once I had taken the time to do that, I realised the Magento team has conveniently given us the ability to add additionalInfo that is rendered as html.

  1. Add a div with the notice class as additional info for a component

The much tackier option would be to have the notice div render in the additionalInfo section. Something along the lines of

    <!-- my_cool_component.xml -->
    <field name="field_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <!-- other field config -->
                <item name="additionalInfo" xsi:type="string" translate="true">
                    &lt;div class="admin__field-note"&gt;
                        This looks like a notice&lt;br/&gt;
                        it is super &ltspan style="font-weight=bold"&gt;TACKY&lt/span&gt;&lt;br/&gt;
                        but it will work &lta href="http://google.com"&gt;I promise&lt/a&gt;

So yeah, simple right? Well. I'm going to go sleep now.

(please note that the xml validator will break if you use the actual < or > characters in your additional info, hence the &lt; and &gt;

Note: turns out you can just wrap your html in <![CDATA[<p>cool paragraph man</p>]] Thanks @Marius

  • 1
    <item name="additionalInfo" xsi:type="string" translate="true"> works a lot better then notice Commented Jun 7, 2018 at 16:57
  • <![CDATA[<p>cool paragraph man</p>]] Does not work under message but it works with additionalInfo mag.2.2.2 Commented Feb 11, 2019 at 12:31

The current Magento 2 versions 2.2.x and 2.3.x both support the HTML additionalInfo by default in UI form field.

<item name="additionalInfo" xsi:type="string">
    <![CDATA[<b>My Html Information</b>]]>

No need to modify the field.html template.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.