# Reference - Field arguments **A `Loki_FieldComponents` block is a block that is defined within the XML layout by referring to the PHTML template `Loki_FieldComponents::field.phtml` and accompanied with various required or optional `arguments`.** ```xml bar ``` ## Extending from Loki Components A Loki Field Component is a Loki Component. Because of this, all XML layout arguments of Loki Components apply to Loki Field Components as well. See [Reference - Component arguments](/components/reference-component-arguments) ## XML layout base arguments A field block can be supplied with the following XML arguments: ## `field_type` (string, default: `text`) A reference to the field type defined as part of the PHP class `Loki\Field\Field\FieldTypeManager` its constructor argument `$fieldTypes`. If a field type is given in the XML layout, while there is no valid type available, an error is given. ```xml textarea ``` Example types: - `input` - `text` - `checkbox` - `password` - `password_repeat` - `radio` - `range` - `select` - `switch` - `textarea` ## `input_type` (string, default: `text`) If the `field_type` is allowing for this (like with `text`), this argument allows setting the type (like with ``). ```xml input email ``` Example types: - `text` - `hidden` - `email` - ... ## `option_model` (instance of `Loki\Field\Util\OptionModelInterface`) When the `field_type` is `select`, this argument supplies the select options. ```xml select LokiCheckout\Core\ViewModel\OptionModel\YesNoOptionModel ``` Example types: - `text` - `hidden` - `email` - ... ## `field_name` (string) The `name` of a specific field (as in: ``). If it is empty, the last part of the blocks XML layout name is used instead (separate by dots). For example, if the block name is `yireo-training.example-field`, the name would become `example-field`. ```xml example ``` ## `field_label` (string) The label of a specific field. ```xml Hello World ``` ## `show_field_label` (boolean, default `true`) A boolean to allow for hiding the field label. ```xml false ``` ## `field_template` (string) By default, the `Loki_FieldComponents::form/field.phtml` template resolves the actual field template via the configured `field_type`. This argument allows you to override the field template on a per-block basis. ```xml YireoTraining_Example::form/field/custom.phtml ``` ## `field_attributes` (array) An array of field attributes added to the field (for example, ``). ```xml ``` In various field-type templates (like `Loki_FieldComponents::field/input.phtml`), a default is defined: - `type`: `text` - `value`: Dynamically derived from `FieldViewModel::getValue()` - `:value`: `value` (Alpine.js property) - `@input`: `setValue` (Alpine.js method) - `@change`: `submit` (Alpine.js method) Within the `FieldViewModel::getFieldAttributes()`, this is further extended: - `id`: Dynamically derived from `FieldViewModel::getFieldId()` - `aria-label`: Field label - `data-type`: `field` - `x-ref`: `field` (Alpine.js reference) - ... Possibilities of this argument range from setting additional Alpine.js directives (`x-mask`, `x-data`) to configuring specific `select` attributes (`multiple` is `true`). ## `required` (boolean, default `false`) A boolean to indicate whether the field is required or not. ```xml true ``` ## `required_error_message` (string, default empty) By default, if a field requires a value and the validation is triggered, a message *Value is required* is shown. This message is generic. You can replace this message with a custom message per field via the argument `required_error_message`. ```xml Make sure to enter a proper input ``` ## `disabled` (boolean, default `false`) A boolean to indicate whether the field is disabled or not. ```xml true ``` ## `help_text` (string) A help text, commonly shown as a help-icon with a balloon. ```xml Enter a proper value ``` ## `comment` (string) A comment, commonly shown underneath the input field. ```xml We hope you like this ``` ## `placeholder` (string) A placeholder for the text (for ``, `

` and alike).

```xml
<block name="yireo-training.example-field">
    <arguments>
        <argument name="placeholder" xsi:type="string">Default value</argument>
    </arguments>
</block>
```

## `autocomplete` (string)
This argument determines the `autocomplete` HTML attribute for a field.

```xml
<block name="yireo-training.example-field">
    <arguments>
        <argument name="autocomplete" xsi:type="string">shipping address-line1</argument>
    </arguments>
</block>
```

## `default_value` (string)
A default value for the field. Note that some field types (like a color input) require this to be set.

```xml
<block name="yireo-training.example-field">
    <arguments>
        <argument name="field_type" xsi:type="string">input</argument>
        <argument name="input_type" xsi:type="string">color</argument>
        <argument name="default_value" xsi:type="string">#ffffff</argument>
    </arguments>
</block>
```

## `js_data` (array)
An array of data to be inserted into the Alpine.js component. Note that properties within this array most likely also require the definition of the same property within the Alpine.js component - especially when the property needs to become reactive.

```xml
<block name="yireo-training.example-field">
    <arguments>
        <argument name="js_data" xsi:type="array">
            <argument name="example" xsi:type="string">foobar</argument>
        </argument>
    </arguments>
</block>
```

## `input_label` (string)
Some field types (like `checkbox` and `switch`) have both a `field_label` and an `input_label`. The `input_label` is typically shown on the right of the field.

```xml
<block name="yireo-training.example-field">
    <arguments>
        <argument name="show_field_label" xsi:type="boolean">false</argument>
        <argument name="field_type" xsi:type="string">switch</argument>
        <argument name="input_label" xsi:type="string">Enable this</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>
```