How to add placeholder checkout page Filed magento 2

Question

How to add placeholder in checkout page like street address,city,Zip code etc Filed in magento 2.4

Answer 1

I had a similar task some time ago, here is how I achieved it.

Create a plugin for Magento\Checkout\Block\Checkout\LayoutProcessor

Vendor/Module/etc/frontend/di.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="[Vendor]_[Module]_Plugin_Frontend_Magento_Checkout_Block_Checkout_LayoutProcessor" type="W2\ExtendCheckout\Plugin\Frontend\Magento\Checkout\Block\Checkout\LayoutProcessor" sortOrder="10" disabled="false"/>
    </type>
</config>

And here is the plugin class

<?php
/**
 * Copyright © WebO2 All rights reserved.
 * See COPYING.txt for license details.
 */
declare(strict_types=1);

namespace [Vendor]\[Module]\Plugin\Frontend\Magento\Checkout\Block\Checkout;

class LayoutProcessor
{

    protected array $_bindings = [
        'company' => [
            'label' => 'Company name (optional)'
        ],
        'country_id' => [
            'sortOrder' => '65'
        ],
        'street' => [
            'label' => 'Address',
            'children' => [
                0 => [
                    'placeholder' => 'Add house number and street name'
                ],
                1 => [
                    'placeholder' => 'Add apartment, suite, unit etc. (optional)'
                ]
            ]
        ],
        'postcode' => [
            'label' => 'Postcode / ZIP',
            'additionalClasses' => 'columns-fields-left',
            'placeholder' => 'Add your postcode',
            'sortOrder'=>'90'
        ],
        'city' => [
            'label'=> 'Town/City',
            'additionalClasses' => 'columns-fields-right',
            'placeholder' => 'Add your town/city',
            'sortOrder'=>'100'
        ],
        'region' => [
            'label'=> 'Province',
            'sortOrder'=>'110',

        ],
        'region_id' => [
            'sortOrder'=>'110'
        ],
        'telephone' => [
            'additionalClasses' => 'columns-fields-right express-checkout-telephone',
            'config' => [
                'tooltip' => false
            ]
        ]
    ];

    /**
     * Checkout LayoutProcessor after process plugin.
     *
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $processor
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(\Magento\Checkout\Block\Checkout\LayoutProcessor $processor, $jsLayout)
    {
        $shippingConfiguration = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
        ['children']['shippingAddress']['children']['shipping-address-fieldset']['children'];
        $billingConfiguration = &$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']
        ['children']['payment']['children']['afterMethods']['children'];




        //Checks if shipping step available.
        if (isset($shippingConfiguration)) {
            $shippingConfiguration = $this->applyBindingToAddresses($shippingConfiguration);
        }

        //Checks if billing step available.
        if (isset($billingConfiguration)) {
            //Iterate over billing forms.
            foreach($billingConfiguration as $key => &$billingForm) {
                //Exclude not billing forms
                if (!strpos($key, '-form')) {
                    continue;
                }
                $billingForm['children']['form-fields']['children'] = $this->applyBindingToAddresses($billingForm['children']['form-fields']['children']);


            }
        }

        return $jsLayout;
    }

    protected function applyBindingToAddresses($shippingConfiguration)
    {

        foreach ($this->_bindings as $field => $configurations) {
            //Shipping Address Fields Form
            if(isset($shippingConfiguration[$field])){
                foreach ($configurations as $key => $data) {
                    if(isset($shippingConfiguration[$field][$key])){

                        if($field == 'street' and $key == 'children'){
                            $shippingConfiguration[$field][$key][0]['placeholder'] = $data[0]['placeholder'];
                            $shippingConfiguration[$field][$key][1]['placeholder']  = $data[1]['placeholder'];
                            continue;
                        }

                        if(is_array($shippingConfiguration[$field][$key]) && is_array($data)) {
                            $shippingConfiguration[$field][$key] = array_merge($shippingConfiguration[$field][$key], $data);
                            continue;
                        }

                        if($key == 'label' || $key == 'placeholder'){
                           $shippingConfiguration[$field][$key] = __($data);
                        } else {
                            $shippingConfiguration[$field][$key] = $data;
                        }

                    } else {
                        if($key == 'label' || $key == 'placeholder'){
                            $shippingConfiguration[$field][$key] = __($data);
                        } else {
                            $shippingConfiguration[$field][$key] = $data;
                        }
                    }
                }
            }
        }




        return $shippingConfiguration;
    }


}

Where [Vendor]_[Module] are your Vendor and Module values.

Answer 2

override below file in your theme directory

path : app/design/frontend/{vendor}/{theme}/Magento_Ui/web/templates/form/element/input.html

<input class="admin__control-text" type="text"
       data-bind="
        event: {change: userChanges},
        value: value,
        hasFocus: focused,
        valueUpdate: valueUpdate,
        attr: {
            name: inputName,
            placeholder: placeholder ? placeholder : label,
            'aria-describedby': noticeId,
            id: uid,
            disabled: disabled
    }"/>

After run the below commands,

php bin/magento s:up
php bin/magento s:s:d -f {language_code}
php bin/magento c:f