# Field types

**By default, a Field Component renders as a field type `input` (aka an HTML element `<input type="text"/>`). This can easily changed by adding a block argument `field_type` via the XML layout**

## Setting a field type
The following code sets the `field_type` to be `textarea` (aka an HTML element `<textarea>`):

```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>
    </arguments>
</block>
```

## Existing field types
The following field types exist by default:

- `checkbox`
- `input` with its additional block argument `input_type`
- `password` including a toggle for showing the password as plain text
- `password_repeat` which renders a 
- `radio`
- `range`
- `select` with an additional flag `multiple` @todo
- `switch`
- `textarea`

## Setting a type for the field type `input`
The field type `input` has an additional block argument `input_type`.

```xml
<block
    name="yireo-training.example-field-component.example"
    template="Loki_FieldComponents::form/field.phtml">
    <arguments>
        <argument name="input_type" xsi:type="string">number</argument>
    </arguments>
</block>
```

The above renders as follows:

```html
<input type="number"/>
```

## Adding custom field types
The field types are defined as constructor arguments of the class `Loki\Field\Field\FieldTypeManager`. This allows you to override things, but also add new field types.

```xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Loki\Field\Field\FieldTypeManager">
        <arguments>
            <argument name="fieldTypes" xsi:type="array">
                <item name="example" xsi:type="string">YireoTraining::form/field/example.phtml</item>
            </argument>
        </arguments>
    </type>
</config>
```