Input component

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

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

Integration

This example integrates the Input component with the Form component.

<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