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

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

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

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