Magento2 Admin Form – How to Add a Class to an Input

formsmagento2uicomponent

I'm building my own add/edit form in the backend for a Magento 2 module using ui-components.
I have one simple thing to do… add a class to an input/select/textarea.
Here is my element definition: 

<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">author</item>
            <item name="sortOrder" xsi:type="number">10</item>
            <item name="dataScope" xsi:type="string">name</item>
            <item name="notice" xsi:type="string" translate="true">Enter full name here</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

This is rendered as 

<div class="admin__field _required" data-bind="css: $data.additionalClasses, attr: {'data-index': index}, visible: visible" data-index="name">
    <!-- ko if: $data.label --><label class="admin__field-label" data-bind="attr: {for: uid}, visible: $data.labelVisible" for="LLKEGUU">
        <span data-bind="attr: {'data-config-scope': $data.scopeLabel}, i18n: label">Name</span>
    </label><!-- /ko -->
    <div class="admin__field-control" data-bind="css: {'_with-tooltip': $data.tooltip, '_with-reset': $data.showFallbackReset &amp;&amp; $data.isDifferedFromDefault}">
        <!-- ko ifnot: hasAddons() --><!-- ko template: elementTmpl -->
<input class="admin__control-text" data-bind="
        event: {change: userChanges},
        value: value,
        hasFocus: focused,
        valueUpdate: valueUpdate,
        attr: {
            name: inputName,
            placeholder: placeholder,
            'aria-describedby': noticeId,
            id: uid,
            disabled: disabled
    }" name="name" aria-describedby="notice-LLKEGUU" id="LLKEGUU" type="text">
<!-- /ko --><!-- /ko -->

        <!-- ko if: hasAddons() --><!-- /ko -->

        <!-- ko if: $data.tooltip --><!-- /ko -->

        <!-- ko if: $data.showFallbackReset && $data.isDifferedFromDefault --><!-- /ko -->

        <!-- ko if: error --><!-- /ko -->

        <!-- ko if: $data.notice --><div class="admin__field-note" data-bind="attr: {id: noticeId}" id="notice-LLKEGUU">
            <span data-bind="i18n: notice">Enter full name here</span>
        </div><!-- /ko -->

        <!-- ko if: $data.additionalInfo --><!-- /ko -->

        <!-- ko if: $data.hasService() --><!-- /ko -->
    </div>
</div>

I want to add a class my-custom-css-class to the field itself or the element wrapping it (the one with the class admin__field-control) or even the wrapper of the wrapper (the one with the class admin__field _required)

Best Answer

You can use the additionalClasses :

<item name="additionalClasses" xsi:type="string">my-custom-class</item>

Side note: interestingly, it seems like it also handles arrays:

<item name="additionalClasses" xsi:type="array">
    <item name="my-custom-class" xsi:type="boolean">true</item>
</item>
Related Topic