How to set the read-only TextBox in React TextBox

9 Aug 20261 minute to read

Prevent user input while allowing text selection and copying by setting the readonly property to true on the TextBoxComponent. Read-only TextBoxes are useful for displaying static data or values that should not be modified directly by users.

index.jsx

import { TextBoxComponent } from "@syncfusion/ej2-react-inputs";
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class Default extends React.Component {
    render() {
        return (<div>
        <TextBoxComponent placeholder="Enter Name" floatLabelType="Auto" readonly= {true} value="John" />
        </div>);
    }
}
ReactDOM.render(<Default />, document.getElementById('input-container'));

index.tsx

import { TextBoxComponent } from "@syncfusion/ej2-react-inputs";
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class Default extends React.Component {

public render() {
   return (
        <div>
        <TextBoxComponent placeholder="Enter Name" floatLabelType="Auto" readonly= {true} value="John" />
        </div>
    );
   }
}
ReactDOM.render(<Default />, document.getElementById('input-container'));