# 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.**

```xml
<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.

- [Reference - Loki Checkout Component arguments](/checkout/dev/reference/component-arguments)
- [Reference - Loki Field Component arguments](/components/reference-component-arguments)
- [Reference - Loki Component arguments](/field-components/reference-field-arguments)

## 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.

```xml
<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.

```xml
<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.

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

See [Customizing CSS classes](docs/checkout/dev/basic-customizations/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).

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

See [Customizing CSS classes](docs/checkout/dev/basic-customizations/customizing-css-classes) for more details.