Adobe Commerce 2.3 reached end of support in September 2022.

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