Add TextBox programmatically in React TextBox component

21 Feb 20265 minutes to read

Create a TextBox component dynamically using the createInput method from the ej2-inputs library. This approach is useful when you need to generate form inputs programmatically or customize input behavior at runtime.

Implementation steps

1. Import the Input module from the ej2-inputs library:

    import {Input} from '@syncfusion/ej2-inputs';

2. Create the TextBox by passing the HTML input element to the createInput method. This transforms the native input into a styled, feature-rich TextBox component.

3. Optional: Add icons to the input by passing the buttons property with the e-input-group-icon class to the createInput method. Icons can improve visual communication about the input’s purpose (e.g., email, phone, search).

index.jsx

import { Input } from '@syncfusion/ej2-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class Default extends React.Component {
    input1;
    input2;
    render() {
        return (<div className="inner-container">
                <input id="input-01" type="text" ref={e1 => this.input1 = e1}/>
                <input id="input-02" type="text" ref={e2 => this.input2 = e2}/>
            </div>);
    }
    componentDidMount() {
        Input.createInput({
            element: this.input1,
            properties: {
                placeholder: 'Enter Name'
            }
        });
        Input.createInput({
            buttons: ['e-input-group-icon e-input-down'],
            element: this.input2,
            properties: {
                placeholder: 'Enter Value'
            }
        });
    }
}
ReactDOM.render(<Default />, document.getElementById('input-container'));

index.tsx

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

export default class Default extends React.Component {
    public input1: any;
    public input2: any;
    public render() {
        return (
            <div className="inner-container">
                <input id="input-01" type="text" ref = { e1 => this.input1 = e1!} />
                <input id="input-02" type="text" ref = { e2 => this.input2 = e2!} />
            </div>
        )
    }

    public componentDidMount() {

        Input.createInput({
            element: this.input1,
            properties:{
                placeholder:'Enter Name'
            }
        });

        Input.createInput({
            buttons: ['e-input-group-icon e-input-down'],
            element: this.input2,
            properties:{
                placeholder:'Enter Value'
            }
        });
    }
}
ReactDOM.render(<Default />, document.getElementById('input-container'));