PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. We strongly recommend planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

Text component

The Text component displays text data in the components like Form and DynamicRows.

Configuration options

Option Description Type Default
class The path to the component class. String Magento\Ui\Component\Form\Element\DataType\Text
component The path to the component’s .js file in terms of RequireJS. String Magento_Ui/js/form/element/text
disabled Initial component’s state. When set to true, users can’t take action on the element. Boolean false
elementTmpl The path to the .html template of the particular field type. String ui/form/element/text
label Label to be displayed in the field. String ''
links.value Links the component’s “value” property with provider using the declared in the “dataScope” property of the parent component. String ${ $.provider }:${ $.dataScope }
visible Initial component’s visibility. When set to false, the “display: none” CSS style is added to the component’s DOM block. Boolean true

Source files

Extends UiElement:

Examples

Integrate Text component with Form component

The following example integrates the Text component with the Form component and displays the customer’s first name in the admin, on the Customer Edit page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form>
    ...
    <fieldset>
        ...
        <field name="text_example" formElement="input" sortOrder="10">
            <settings>
                <elementTmpl>ui/form/element/text</elementTmpl>
                <label translate="true">Text Field Example</label>
                <imports>
                    <link name="value">${ $.provider }:data.customer.firstname</link>
                </imports>
            </settings>
        </field>
    </fieldset>
</form>

Result

Text Component example