I would like to set Max Length for Customer's Street Address 1 to 50 Characters & Street Address 2 to 100 Characters.

enter image description here

Changes will be applied on Frontend only, where we can find Street Address.

Last is to override page.

How to achieve this?


Finally I Got Solution by creating new Module :)

Referce Post: Magento 2 - How to affect street address in checkout forms with layout xml/ui arguments


        \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Custom_Checkout', __DIR__


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Custom_Checkout" setup_version="1.0.0" />


<?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="Custom_Checkout" type="Custom\Checkout\Block\LayoutProcessor" sortOrder="100"/>


namespace Custom\Checkout\Block;

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
    ) {
                ['shippingAddress']['children']['shipping-address-fieldset']['children']['street'] = [
            'component' => 'Magento_Ui/js/form/components/group',
            'label' => __('Street Address'),
            'required' => true,
            'dataScope' => 'shippingAddress.street',
            'provider' => 'checkoutProvider',
            'sortOrder' => 60,
            'type' => 'group',
            'children' => [
                    'component' => 'Magento_Ui/js/form/element/abstract',
                    'config' => [
                        'customScope' => 'shippingAddress',
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/input'
                    'dataScope' => '0',
                    'provider' => 'checkoutProvider',
                    'validation' => ['required-entry' => true, "min_text_len‌​gth" => 1, "max_text_length" => 50],
                    'component' => 'Magento_Ui/js/form/element/abstract',
                    'config' => [
                        'customScope' => 'shippingAddress',
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/input'
                    'dataScope' => '1',
                    'provider' => 'checkoutProvider',
                    'validation' => ['required-entry' => false, "min_text_len‌​gth" => 1, "max_text_length" => 50],
        return $jsLayout;


Thanks :)

  • Its great that you have find the file in which you have to edit. I want you to find the file on your own thats why i have not gave the reply on that answer. Because directory structure of magento is simple to understand and by small research you can get your file. – Gopal Patel Dec 7 '16 at 7:42
  • very nice, but so you have limited the number of street lines to 2. i think is better mantein original loop and set max_length with a variable in base of loop index, so if a user set more of 2 lines could use anyway this code. – LucScu Jul 19 '17 at 8:28
  • @AnkitShah I'm trying to do the same to set a Max Length for the input fields on checkout page. In your LayoutProcessor.php, how is this function afterProcess being called? This function doesn't exist in /Magento/module-checkout/Block/Checkout/LayoutProcessor.php. Thanks – Magento Learner May 9 '18 at 9:39

try to set maxLength

<input type="text" name="federal" maxlength="10"  value="" title="<?php /* @escapeNotVerified */ echo __('Federal Tax ID (EIN)') ?>" class="input-text" id="federal" data-validate="{required:true, 'federal':true}">
  • Already know above thing. This is not what i'm looking for. Which template file needs to override?. Would like to display message to user that "Max Length is 50 Characters" for Line 1 & Same for Line 2 with "Max Length is 100 Characters" – Ankit Shah Dec 6 '16 at 5:55

You can set the max length and/or many more other validation quite easily by just adding them to the correct element in the layout xml for the input form you want to affect.

<item name="street" xsi:type="array">
    <item name="validation" xsi:type="array">
        <!-- Classes for data validation: -->
        <item name="min_text_length" xsi:type="number">1</item>
        <item name="max_text_length" xsi:type="number">50</item>

You can check out my comment here where you can find a list of some other available validations

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.