How To Add Custom Field At Checkout Address Form In Magento 2

How To Add Custom Field At Checkout Address Form In Magento 2 : Sometime we need to add some extra fields to show in checkout customer address form.so today i will let you know. how you can add custom address field at checkout address from.

1 => we need to create a plugin for the
\Magento\Checkout\Block\Checkout\LayoutProcessor::process method. because billing and shipping address forms are generated dynamically.

so we need create a plugin on process method LayoutProcessor class.
first we have to make an entry in di.xml on this path
app/code/CompanyName/Module/etc/frontend/di.xml

<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="add_custom_field_checkout_form" type="CompanyName\Module\Model\Plugin\Checkout\LayoutProcessor" sortOrder="100"/>
    </type>
</config>

2 => Create plugin class on this Directory.
app\code\CompanyName\Module\Model\Plugin\Checkout

<?php
namespace CompanyName\Module\Model\Plugin\Checkout;
class LayoutProcessor
{
    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array  $jsLayout
    ) {

        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['custom_field'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/input',
                'options' => [],
                'id' => 'custom-field'
            ],
            'dataScope' => 'shippingAddress.custom_attributes.custom_field',
            'label' => 'Custom Field',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [],
            'sortOrder' => 250,
            'id' => 'custom-field'
        ];


        return $jsLayout;
    }
}

After these two steps your custom field will be display at checkout address form. check the below screenshot.

Hope so it will help you.