Adobe Commerce 2.3 reached end of support in September 2022.

Input component

The Input component implements the HTML <input type="text"> field.

Configuration options

Option Description Type Default
class Path to the PHP class responsible for the backend implementation of the component. String -
component The path to the component’s .js file in terms of RequireJS. String Magento_Ui/js/form/element/abstract
displayArea Renders the component in the location that was declared in the layout. String body
elementTmpl The path to the .html template of the particular field type. String ui/form/element/input
extends Extends configuration from specified component. String -
formElement Form Element. hidden, file, input, date, boolean, checkbox, checkboxset, email, select, multiselect, text, textarea, price, radioset, wysiwyg input
name Element’s index in the scope of the current collection that will be used to build its unique identifier. String -
provider Reference to component data provider. For example, for the “New Customer” page on the back-end side it will be equal to customer_form.customer_form_data_source String -
sortOrder Element’s position in the collection Int 0
template The path to the component’s .html template. String ui/form/field

Source files

Extends UiElement:

Examples

Integrate the Input component with the Form component

This example integrates the Input component with the Form component.

1
2
3
4
5
6
7
8
9
10
11
12
13
<form>
    ...
    <fieldset>
        ...
        <field name="input_example" formElement="input" sortOrder="10">
            <settings>
                <visible>true</visible>
                <elementTmpl>ui/form/element/input</elementTmpl>
                <label translate="true">Input field example</label>
            </settings>
        </field>
    </fieldset>
</form>

Result

Input Component example