Getting started with React TextBox component

8 May 202518 minutes to read

This section briefly explains about how to create a simple TextBox using Create React App.

Dependencies

The following list of dependencies are required to use the TextBox component in your application.

|-- @syncfusion/ej2-react-inputs
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-base

Installation and Configuration

To easily set up a React application, use create-vite-app, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions. Vite sets up your environment using JavaScript and optimizes your application for production.

Note: To create a React application using create-react-app, refer to this documentation for more details.

To create a new React application, run the following command.

npm create vite@latest my-app

To set-up a React application in TypeScript environment, run the following command.

npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev

To set-up a React application in JavaScript environment, run the following command.

npm create vite@latest my-app -- --template react
cd my-app
npm run dev
  • To install TextBox component, use the following command.
npm install @syncfusion/ej2-react-inputs –save

  • The above package installs Input dependencies which are required to render the TextBox component in React environment.

  • The TextBox CSS files are available in the ej2-react-inputs package folder. This can be referenced in your application using the following code.

[src/App.css]

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-inputs/styles/material.css";

The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script and styles for a set of specific components.
This web tool is useful to combine the required component scripts and styles in a single file.

Adding TextBox to the application

Return the TextBoxComponent within render method in src/App.tsx file to render the TextBox component as like below code.

[Class-component]

import * as React from "react";
import './App.css';
export default class App extends React.Component<{}, {}> {
    public render() {
      return (
        // element which is going to render the TextBox
        <TextBoxComponent placeholder="Enter Name"></TextBoxComponent>
      );
    }
};

[Functional-component]

import * as React from "react";
import './App.css';
function App() {
    return (
        // element which is going to render the TextBox
         <TextBoxComponent placeholder="Enter Name"></TextBoxComponent>
    );
};
ReactDOM.render(<App />, document.getElementById('input-container'));

Adding icons to the TextBox

You can create a TextBox with an icon by using the addIcon method within the created event. For detailed information, refer to the Groups section.

[Class-component]

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

export default class Default extends React.Component {
    public textboxObj = React.createRef();

    public oncreate() {  
        (this.textboxObj.current as any).addIcon('append', 'e-icons e-input-popup-date');
    }

    public render() {
        return (
            <TextBoxComponent
                id='default'
                placeholder="Enter Date"
                ref={this.textboxObj}
                created={this.oncreate}
            />
        );
    }
}

createRoot(document.getElementById('default')).render(<Default />);

[Functional-component]

import * as React from "react";
import { createRoot } from 'react-dom/client';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useRef } from 'react';

function Default()  {
    const textboxObj = useRef(null);

    function oncreate() {  
        textboxObj.current.addIcon('append', 'e-icons e-input-group-icon e-input-popup-date');
    }
    return (
        <TextBoxComponent
            id='default'
            placeholder="Enter Date"
            ref={textboxObj}
            created={oncreate}
        />
    );
};   

createRoot(document.getElementById('default')).render(<Default />);
.e-input-group .e-icons.e-input-group-icon.e-input-popup-date {
    font-size:16px;
}
.e-input-group .e-icons.e-input-group-icon.e-input-popup-date:before {
    content: "\e901";
}

Now run the npm run dev command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.

npm run dev

Output will be as follows:

[Class-component]

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

export default class Default extends React.Component {
    textBoxObj = React.createRef();

    oncreate = () => {  
        this.textBoxObj.current.addIcon('append', 'e-icons e-input-popup-date');
    }

    render() {
        return (
            <TextBoxComponent
                id='default'
                placeholder="Enter Date"
                ref={this.textBoxObj}
                created={this.oncreate}
            />
        );
    }
}

createRoot(document.getElementById('default')).render(<Default />);
import * as React from "react";
import { createRoot } from 'react-dom/client';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default class Default extends React.Component {
    public textBoxObj = React.createRef();

    public oncreate() {  
        (this.textBoxObj.current as any).addIcon('append', 'e-icons e-input-popup-date');
    }

    public render() {
        return (
            <TextBoxComponent
                id='default'
                placeholder="Enter Date"
                ref={this.textBoxObj}
                created={this.oncreate}
            />
        );
    }
}

createRoot(document.getElementById('default')).render(<Default />);

[Functional-component]

import * as React from "react";
import { createRoot } from 'react-dom/client';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useRef } from 'react';

function Default()  {
    textBoxObj = useRef(null);

    function oncreate() {  
        textBoxObj.current.addIcon('append', 'e-icons e-input-popup-date');
    }
    return (
        <TextBoxComponent
            id='default'
            placeholder="Enter Date"
            ref={textBoxObj}
            created={oncreate}
        />
    );
};   

createRoot(document.getElementById('default')).render(<Default />);
import * as React from "react";
import { createRoot } from 'react-dom/client';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useRef } from 'react';

function Default()  {
    const textBoxObj = useRef(null);

    function oncreate() {  
        (textBoxObj.current as any).addIcon('append', 'e-icons e-input-popup-date');
    }
    return (
        <TextBoxComponent
            id='default'
            placeholder="Enter Date"
            ref={textBoxObj}
            created={oncreate}
        />
    );
};   

createRoot(document.getElementById('default')).render(<Default />);

Floating Label

The floating label TextBox floats the label above the TextBox after focusing, or filled with value in the TextBox.
You can create the floating label TextBox by using the floatLabelType API.

[Class-component]

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    render() {
        return (<div className="App">
                <div className="textboxes">
                    <h4>FloatLabelType as Auto</h4>
                    <TextBoxComponent placeholder="First Name" floatLabelType="Auto"/>
                </div>
                <div className="textboxes">
                    <h4>FloatLabelType as Always</h4>
                    <TextBoxComponent placeholder="Last Name" floatLabelType="Always"/>
                </div>
            </div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('input-container'));
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
    public render() {
        return (
             <div className="App">
                <div className="textboxes">
                    <h4>FloatLabelType as Auto</h4>
                    <TextBoxComponent placeholder="First Name" floatLabelType="Auto"/>
                </div>
                <div className="textboxes">
                    <h4>FloatLabelType as Always</h4>
                    <TextBoxComponent placeholder="Last Name" floatLabelType="Always"/>
                </div>
            </div>
        )
    }
};
ReactDOM.render(<App />, document.getElementById('input-container'));

[Functional-component]

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<div className="App">
                <div className="textboxes">
                    <h4>FloatLabelType as Auto</h4>
                    <TextBoxComponent placeholder="First Name" floatLabelType="Auto"/>
                </div>
                <div className="textboxes">
                    <h4>FloatLabelType as Always</h4>
                    <TextBoxComponent placeholder="Last Name" floatLabelType="Always"/>
                </div>
            </div>);
}
;
ReactDOM.render(<App />, document.getElementById('input-container'));
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

    function App() {
        return (
             <div className="App">
                <div className="textboxes">
                    <h4>FloatLabelType as Auto</h4>
                    <TextBoxComponent placeholder="First Name" floatLabelType="Auto"/>
                </div>
                <div className="textboxes">
                    <h4>FloatLabelType as Always</h4>
                    <TextBoxComponent placeholder="Last Name" floatLabelType="Always"/>
                </div>
            </div>
        )
    };

ReactDOM.render(<App />, document.getElementById('input-container'));

You can refer to our React TextBox feature tour page for its groundbreaking feature representations. You can also explore our React TextBox example to know how to render and configure the TextBox.

See Also