Add HTML attribute for field in checkout

Question

it's possible add custom attribute in div (or input) that contain field of checkout in $jsLayout array?

In my case i want add tabindex attribute

Answer 1

Yes you can override input field using $jsLayout array in you custom module. Hope you know how to create Layoutprocessor plugin.

In you Layoutprocessor override text field file 'elementTmpl' to your custom file from custom module like below code

$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['telephone']['config']['elementTmpl'] = 'Vendor_Module/form/element/telephone';

And in you html file you can add your attribute like below Vendor/Module/view/frontend/web/template/form/element/telephone.html

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<input class="input-text" type="tel" tabindex="3" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': getDescriptionId(),
        'aria-required': required,
        'aria-invalid': error() ? true : 'false',
        id: uid,
        disabled: disabled
    }" />

Answer 2

You could copy this file

vendor/magento/module-ui/view/frontend/web/templates/form/element/input.html:7

to your app/design/ folder and add tabindex to the attr like this

<input class="input-text" type="text" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': getDescriptionId(),
        'aria-required': required,
        'aria-invalid': error() ? true : 'false',
        id: uid,
        disabled: disabled,
        'tabindex': tabindex()
    }" />

and then create a js file which extends the abstract and add your function to it

define([
    'Magento_Ui/js/form/element/abstract'
], function (Abstract) {
    'use strict';

    return Abstract.extend({
        tabindex: function() {
           return 'what you need to return';
        }
    })
})

then you should have an attribute like I have test="HELLO" here: