Add Readonly field to ui component form Magento 2.

Using ui_component form.xml type, You can set a field with only Read-only or disabled access.

Field with read-only, Admin can’t able to edit a field in UI form.

The field will be displayed for only read-only purposes.

To Set the field read-only, You need to use the <disabled> tag in the field’s <settings> node.

You can add a read-only field to the ui_component form using the below way,

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<field name="nickname" formElement="input">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">customer</item>
</item>
</argument>
<settings>
<dataType>text</dataType>
<disabled>1</disabled>
</settings>
</field>
<field name="nickname" formElement="input"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="source" xsi:type="string">customer</item> </item> </argument> <settings> <dataType>text</dataType> <disabled>1</disabled> </settings> </field>
<field name="nickname" formElement="input">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="source" xsi:type="string">customer</item>
        </item>
    </argument>
    <settings>
        <dataType>text</dataType>
        <disabled>1</disabled>
    </settings>
</field>

Here nickname field with text input type and only readOnly field. you can’t edit this field in Form.

<disabled>1</disabled> used to create field non editable.