loki Documentation

Address Field arguments

Address fields in either the billing or the shipping address are Loki FieldComponents with additional LokiCheckout flavor. Various XML layout arguments can be used to influence their behaviour.

<block name="yireo-training.example-field" template="Loki_FieldComponents::field.phtml">
    <arguments>
        <argument name="foo" xsi:type="string">bar</argument>
    </arguments>
</block>

See also

A address field in the checkout is a Loki Field Component. Because of this, all XML layout arguments of Loki Field Components apply to address fields as well. And an address field is (by default) also a Checkout Component, so it inherits from there as well.

XML layout base arguments

A field block can be supplied with the following XML arguments:

sort_order (string)

Address fields are child blocks to a parent block which renders all child blocks using Loki\Base\ViewModel\Block\ChildRenderer::all() sorted by their sort_order. This sort_order is determined first of all via etc/loki-checkout.xml files. But you can override the sort_order per address field as well. Use a value higher than 0.

<block name="yireo-training.example-field">
    <arguments>
        <argument name="sort_order" xsi:type="string">40</argument>
    </arguments>
</block>

use_label_tag (boolean, default true)

If enabled, the label element is created with an HTML tag <label>. If disabled, a <span> is used instead. This is useful when you are creating the <label> in a different way.

<block name="yireo-training.example-field">
    <arguments>
        <argument name="use_label_tag" xsi:type="boolean">false</argument>
    </arguments>
</block>

css_classes (array)

Because the field templates make use of the $css() utility, CSS classes of address fields can be appended or overwritten with the css_classes argument.

<block name="yireo-training.example-field">
    <arguments>
        <argument name="css_classes" xsi:type="array">
            <argument name="default" xsi:type="array">
                <argument name="example" xsi:type="string">text-xl</argument>
            </argument>
        </argument>
    </arguments>
</block>

See Customizing CSS classes for more details.

css_styles (array)

Because the field templates make use of the $style() utility, CSS styles of address fields can be appended or overwritten with the css_styles argument.

This is specifically interesting because the address fields are placed in a CSS grid, where each field is sized by using the CSS class loki-col-span which then uses the CSS properties --loki-col-span (default 12) and --loki-md-col-span (default 6).

<block name="yireo-training.example-field">
    <arguments>
        <argument name="css_classes" xsi:type="array">
            <argument name="default" xsi:type="array">
                <argument name="--loki-col-span" xsi:type="string">6</argument>
                <argument name="--loki-md-col-span" xsi:type="string">3</argument>
            </argument>
        </argument>
    </arguments>
</block>

See Customizing CSS classes for more details.

Last modified: January 29, 2026