Adding HTML attributes

Whenever a Field Component is rendered, its PHTML template makes it possible to render additional HTML attributes to the field itself (<input>, <textarea>, <select>, etc) through the XML layout argument field_attributes.

For instance, when dealing with a textarea, you might want to set the number of rows to be displayed:

<block
    name="yireo-training.example-field-component.example"
    template="Loki_FieldComponents::form/field.phtml">
    <arguments>
        <argument name="field_type" xsi:type="string">textarea</argument>
        <argument name="field_attributes" xsi:type="array">
            <item name="rows" xsi:type="number">10</item>
        </argument>
    </arguments>
</block>

When the value is something other than a boolean, it will be used as value for the HTML attribute:

<textarea rows="10"></textarea>

Another example:

<block
    name="yireo-training.example-field-component.example"
    template="Loki_FieldComponents::form/field.phtml">
    <arguments>
        <argument name="field_type" xsi:type="string">textarea</argument>
        <argument name="field_attributes" xsi:type="array">
            <item name="autofocus" xsi:type="boolean">true</item>
        </argument>
    </arguments>
</block>

When the value is a boolean true, the HTML attribute name will be shown without a value:

<textarea autofocus></textarea>

Overriding HTML attributes

Because this is Magento XML, you can simply reference the existing block to override HTML attributes:

<referenceBlock name="yireo-training.example-field-component.example">
    <arguments>
        <argument name="field_attributes" xsi:type="array">
            <item name="rows" xsi:type="number">8</item>
        </argument>
    </arguments>
</referenceBlock>

Removing HTML attributes

Removing HTML attributes is done by setting the value to a boolean false.

<referenceBlock name="yireo-training.example-field-component.example">
    <arguments>
        <argument name="field_attributes" xsi:type="array">
            <item name="rows" xsi:type="boolean">false</item>
        </argument>
    </arguments>
</referenceBlock>