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?

enter image description here

  • You can override this file in your theme and check condition for that. – Rakesh Jesadiya May 31 '17 at 9:50

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>
  • Thank you for your reply. If I were to also want to update the 'value' and 'id' via the bindings, how would one do that? – Mitch7663 May 31 '17 at 10:10
  • 1
    I think you would need to modify or extend the related JS, which in this instance I think is Magento_Ui/view/base/web/js/form/element/text.js or possibly even Magento_Ui/view/base/web/js/form/element/abstract.js. I haven't done a lot with so I'd need some time to provide an in depth answer sorry. – Ben Crook May 31 '17 at 10:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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