Magento 2: Update specific input field class via Knockout

Question

I would like to update / add a class to a specific text input field via Knockout (as opposed to just using JQuery).

For example, I'd like to add another class to the input below.

And, more importantly, if I were to also want to update the 'value' and 'id' via the bindings, how would one do that?

Answer 1

You have two options:

Overwrite the template

You can overwrite the template and add the class, to do this copy the template file into your theme and add your class.

Based off your question I suspect the template is this one

The downside of this is it will affect every text input on the website, if this is what you intend then this method will work.

Create a new template

If you only want your new class to appear in certain areas of the website then you'll need to create a new template and use that one.

This can be done with the following layout XML.

<item name="field-you-want-to-change" xsi:type="array">
    <item name="sortOrder" xsi:type="string">40</item>
    <item name="config" xsi:type="array">
        <item name="elementTmpl" xsi:type="string">Package_Theme/form/element/input-custom.html</item>
    </item>
</item>