cancel
Showing results for 
Search instead for 
Did you mean: 

Magento 2: How I can call country and region use UI in checkout?

Magento 2: How I can call country and region use UI in checkout?

I want to show country and region in custom step checkout but its just show input not select.

<item name="region" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">ui/form/field</item>
        <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
    </item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="dataScope" xsi:type="string">billingAddress.region</item>
    <item name="sortOrder" xsi:type="string">6</item>
    <item name="label" xsi:type="string">State/Province</item>
    <item name="visible" xsi:type="boolean">false</item>
</item>
<item name="region_id" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/region</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">ui/form/field</item>
        <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
        <item name="customEntry" xsi:type="string">billingAddress.region_id</item>
    </item>
    <item name="sortOrder" xsi:type="string">7</item>
    <item name="label" xsi:type="string">State/Province</item>
    <item name="customEntry" xsi:type="string">region</item>
    <item name="validation" xsi:type="array">
        <item name="required-entry" xsi:type="boolean">true</item>
    </item>
    <!-- Value of region_id field is filtered by the value of county_id attribute -->
    <item name="filterBy" xsi:type="array">
        <item name="target" xsi:type="string"><![CDATA[${ $.provider }:${ $.parentScope }.country_id]]></item>
        <item name="field" xsi:type="string">country_id</item>
    </item>
</item>
<item name="postcode" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/post-code</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">ui/form/field</item>
        <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
    </item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="dataScope" xsi:type="string">billingAddress.postcode</item>
    <item name="label" xsi:type="string">Zip/Postal Code</item>
    <item name="sortOrder" xsi:type="string">8</item>
    <item name="validation" xsi:type="array">
        <item name="required-entry" xsi:type="string">true</item>
    </item>
</item>
<item name="country_id" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/country</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">ui/form/field</item>
        <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
        <item name="customEntry" xsi:type="string">billingAddress.country_id</item>
    </item>
    <item name="label" xsi:type="string">Country</item>
    <item name="sortOrder" xsi:type="string">9</item>
    <item name="validation" xsi:type="array">
        <item name="required-entry" xsi:type="boolean">true</item>
    </item>
</item>

Let me know where I am wrong or if anything is missing here...

Any help would be appreciated Smiley Happy