Add TextBox Programmatically in React TextBox component

01 Jul 2022 / 1 minute to read

Create a TypeScript file and import the Input modules from ej2-inputs library as shown below.

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

Pass the HTML Input element as parameter to the createInput method.
You can also add the icons on the input by passing buttons property value with the class name e-input-group-icon as parameter to the createInput method.

Source

Preview

index.jsx

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 {
    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'));

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'));