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

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

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

Another example:

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

```html
<textarea autofocus></textarea>
```

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

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

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