Text component

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

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

Integration

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:

<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