Groups in React TextBox component

21 Oct 202424 minutes to read

The following section explains you the steps required to create TextBox with icon and floating label.

Floating label:

To add the Floating label by using FloatLabelType property. Specifies the floating label behavior of the TextBox that the placeholder text floats above the TextBox based on the below values. Possible values are:

Never - The placeholder text should not be float ever.
Always - The placeholder text floats above the TextBox always.
Auto - The placeholder text floats above the TextBox while focusing or enter a value in TextBox.

[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 Floating TextBox
        <TextBoxComponent placeholder="Enter Name" floatLabelType="Auto"></TextBoxComponent>
      );
    }
};

[Functional-component]

import * as React from "react";
import * as ReactDOM from 'react-dom';
import './App.css';

function App() {
    return (
        // element which is going to render the Floating TextBox
       <TextBoxComponent placeholder="Enter Name" floatLabelType="Auto"></TextBoxComponent>
    );
}
ReactDOM.render(<App />, document.getElementById('input-container'));

And refer to the following sections to add the icons to the TextBox.

With icon and floating label

Create an icon in the TextBox using the addIcon method and enable the float label using the FloatLabelType property. The user can place the icon on either side of the TextBox by specifying “append” or “prepend” in the addIcon method.

[Class-component]

index.jsx
index.tsx
import * as React from "react";
import './index.css';
import * as ReactDOM from "react-dom";
import { createRoot } from 'react-dom/client';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
export default class Default extends React.Component {
    textBoxObj = React.createRef();
    textBoxObj1 = React.createRef();
    textBoxObj2 = React.createRef();
    textBoxObj3 = React.createRef();
    textBoxObj4 = React.createRef();
    textBoxObj5 = React.createRef();
    oncreate = () => {  
        this.textBoxObj.current.addIcon('append', 'e-icons e-input-popup-date');
    }
    oncreated = () => {  
        this.textBoxObj1.current.addIcon('prepend', 'e-icons e-input-popup-date');
    }
    oncreateHandle = () => {  
        this.textBoxObj2.current.addIcon('append', 'e-icons e-input-down');
        this.textBoxObj2.current.addIcon('prepend', 'e-icons e-input-popup-date');
    }
    ontextcreate = () => {  
        this.textBoxObj3.current.addIcon('append', 'e-icons e-input-popup-date');
    }
    ontextcreated = () => {  
        this.textBoxObj4.current.addIcon('prepend', 'e-icons e-input-popup-date');
    }
    ontextcreateHandle = () => {  
        this.textBoxObj5.current.addIcon('append', 'e-icons e-input-down');
        this.textBoxObj5.current.addIcon('prepend', 'e-icons e-input-popup-date');
    }

    render() {
        return (<div>

    <h4> TextBox with icons </h4>

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

    <TextBoxComponent
        id='textboxObj'
        placeholder="Enter Date"
        ref={this.textBoxObj1}
        created={this.oncreated}
    />

    <TextBoxComponent
        id='textObj'
        placeholder="Enter Date"
        ref={this.textBoxObj2}
        created={this.oncreateHandle}
    />

    <h4> Floating label with icons </h4>

    <TextBoxComponent
        id='floatdefault'
        placeholder="Enter Date"
        floatLabelType="Auto"
        ref={this.textBoxObj3}
        created={this.ontextcreate}
    />

    <TextBoxComponent
        id='floattextboxObj'
        placeholder="Enter Date"
        floatLabelType="Auto"
        ref={this.textBoxObj4}
        created={this.ontextcreated}
    />

    <TextBoxComponent
        id='floattextObj'
        placeholder="Enter Date"
        floatLabelType="Auto"
        ref={this.textBoxObj5}
        created={this.ontextcreateHandle}
    />
        </div>);
    } 
}
ReactDOM.render(<Default />, document.getElementById('input-container'));
import * as React from "react";
import './index.css';
import * as ReactDOM from "react-dom";
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 textBoxObj1 = React.createRef();
    public textBoxObj2 = React.createRef();
    public textBoxObj3 = React.createRef();
    public textBoxObj4 = React.createRef();
    public textBoxObj5 = React.createRef();
    public oncreate() {  
        this.textBoxObj.current.addIcon('append', 'e-icons e-input-popup-date');
    }
    public oncreated() {  
        this.textBoxObj1.current.addIcon('prepend', 'e-icons e-input-popup-date');
    }
    public oncreateHandle() {  
        this.textBoxObj2.current.addIcon('append', 'e-icons e-input-down');
        this.textBoxObj2.current.addIcon('prepend', 'e-icons e-input-popup-date');
    }
    public ontextcreate() {  
        this.textBoxObj3.current.addIcon('append', 'e-icons e-input-popup-date');
    }
    public ontextcreated() {  
        this.textBoxObj4.current.addIcon('prepend', 'e-icons e-input-popup-date');
    }
    public ontextcreateHandle() {  
        this.textBoxObj5.current.addIcon('append', 'e-icons e-input-down');
        this.textBoxObj5.current.addIcon('prepend', 'e-icons e-input-popup-date');
    }

    public render() {
        return (<div>

    <h4> TextBox with icons </h4>

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

    <TextBoxComponent
        id='textboxObj'
        placeholder="Enter Date"
        ref={this.textBoxObj1}
        created={this.oncreated}
    />

    <TextBoxComponent
        id='textObj'
        placeholder="Enter Date"
        ref={this.textBoxObj2}
        created={this.oncreateHandle}
    />

    <h4> Floating label with icons </h4>

    <TextBoxComponent
        id='floatdefault'
        placeholder="Enter Date"
        floatLabelType="Auto"
        ref={this.textBoxObj3}
        created={this.ontextcreate}
    />

    <TextBoxComponent
        id='floattextboxObj'
        placeholder="Enter Date"
        floatLabelType="Auto"
        ref={this.textBoxObj4}
        created={this.ontextcreated}
    />

    <TextBoxComponent
        id='floattextObj'
        placeholder="Enter Date"
        floatLabelType="Auto"
        ref={this.textBoxObj5}
        created={this.ontextcreateHandle}
    />
        </div>);
    } 
}
ReactDOM.render(<Default />, document.getElementById('input-container'));

[Functional-component]

index.jsx
index.tsx
import * as React from "react";
import './index.css';
import * as ReactDOM from "react-dom";
import { createRoot } from 'react-dom/client';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
export default class Default extends React.Component {
    textBoxObj = React.createRef();
    textBoxObj1 = React.createRef();
    textBoxObj2 = React.createRef();
    textBoxObj3 = React.createRef();
    textBoxObj4 = React.createRef();
    textBoxObj5 = React.createRef();
    oncreate = () => {  
        this.textBoxObj.current.addIcon('append', 'e-icons e-input-popup-date');
    }
    oncreated = () => {  
        this.textBoxObj1.current.addIcon('prepend', 'e-icons e-input-popup-date');
    }
    oncreateHandle = () => {  
        this.textBoxObj2.current.addIcon('append', 'e-icons e-input-down');
        this.textBoxObj2.current.addIcon('prepend', 'e-icons e-input-popup-date');
    }
    ontextcreate = () => {  
        this.textBoxObj3.current.addIcon('append', 'e-icons e-input-popup-date');
    }
    ontextcreated = () => {  
        this.textBoxObj4.current.addIcon('prepend', 'e-icons e-input-popup-date');
    }
    ontextcreateHandle = () => {  
        this.textBoxObj5.current.addIcon('append', 'e-icons e-input-down');
        this.textBoxObj5.current.addIcon('prepend', 'e-icons e-input-popup-date');
    }

    render() {
        return (<div>

    <h4> TextBox with icons </h4>

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

    <TextBoxComponent
        id='textboxObj'
        placeholder="Enter Date"
        ref={this.textBoxObj1}
        created={this.oncreated}
    />

    <TextBoxComponent
        id='textObj'
        placeholder="Enter Date"
        ref={this.textBoxObj2}
        created={this.oncreateHandle}
    />

    <h4> Floating label with icons </h4>

    <TextBoxComponent
        id='floatdefault'
        placeholder="Enter Date"
        floatLabelType="Auto"
        ref={this.textBoxObj3}
        created={this.ontextcreate}
    />

    <TextBoxComponent
        id='floattextboxObj'
        placeholder="Enter Date"
        floatLabelType="Auto"
        ref={this.textBoxObj4}
        created={this.ontextcreated}
    />

    <TextBoxComponent
        id='floattextObj'
        placeholder="Enter Date"
        floatLabelType="Auto"
        ref={this.textBoxObj5}
        created={this.ontextcreateHandle}
    />
        </div>);
    } 
}
ReactDOM.render(<Default />, document.getElementById('input-container'));
import * as React from "react";
import './index.css';
import * as ReactDOM from "react-dom";
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 textBoxObj1 = React.createRef();
    public textBoxObj2 = React.createRef();
    public textBoxObj3 = React.createRef();
    public textBoxObj4 = React.createRef();
    public textBoxObj5 = React.createRef();
    public oncreate() {  
        this.textBoxObj.current.addIcon('append', 'e-icons e-input-popup-date');
    }
    public oncreated() {  
        this.textBoxObj1.current.addIcon('prepend', 'e-icons e-input-popup-date');
    }
    public oncreateHandle() {  
        this.textBoxObj2.current.addIcon('append', 'e-icons e-input-down');
        this.textBoxObj2.current.addIcon('prepend', 'e-icons e-input-popup-date');
    }
    public ontextcreate() {  
        this.textBoxObj3.current.addIcon('append', 'e-icons e-input-popup-date');
    }
    public ontextcreated() {  
        this.textBoxObj4.current.addIcon('prepend', 'e-icons e-input-popup-date');
    }
    public ontextcreateHandle() {  
        this.textBoxObj5.current.addIcon('append', 'e-icons e-input-down');
        this.textBoxObj5.current.addIcon('prepend', 'e-icons e-input-popup-date');
    }

    public render() {
        return (<div>

    <h4> TextBox with icons </h4>

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

    <TextBoxComponent
        id='textboxObj'
        placeholder="Enter Date"
        ref={this.textBoxObj1}
        created={this.oncreated}
    />

    <TextBoxComponent
        id='textObj'
        placeholder="Enter Date"
        ref={this.textBoxObj2}
        created={this.oncreateHandle}
    />

    <h4> Floating label with icons </h4>

    <TextBoxComponent
        id='floatdefault'
        placeholder="Enter Date"
        floatLabelType="Auto"
        ref={this.textBoxObj3}
        created={this.ontextcreate}
    />

    <TextBoxComponent
        id='floattextboxObj'
        placeholder="Enter Date"
        floatLabelType="Auto"
        ref={this.textBoxObj4}
        created={this.ontextcreated}
    />

    <TextBoxComponent
        id='floattextObj'
        placeholder="Enter Date"
        floatLabelType="Auto"
        ref={this.textBoxObj5}
        created={this.ontextcreateHandle}
    />
        </div>);
    } 
}
ReactDOM.render(<Default />, document.getElementById('input-container'));

With clear button and floating label

The clear button is added to the input for clearing the value given in the TextBox. It is shown only when the input field has a value, otherwise not shown.

You can add the clear button to the TextBox by using showClearButton API in TextBox.

[Class-component]

index.jsx
index.tsx
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>Textbox with clear button</h4>
                    <TextBoxComponent placeholder="First Name" showClearButton={true} floatLabelType="Never"/>
                </div>
                <div className="textboxes">
                    <h4>Floating textbox with clear button</h4>
                    <TextBoxComponent placeholder="Last Name" showClearButton={true} floatLabelType="Auto"/>
                </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>Textbox with clear button</h4>
                    <TextBoxComponent placeholder="First Name" showClearButton= {true} floatLabelType="Never"/>
                </div>
                <div className="textboxes">
                    <h4>Floating textbox with clear button</h4>
                    <TextBoxComponent placeholder="Last Name" showClearButton= {true} floatLabelType="Auto"/>
                </div>
            </div>
        )
    }
};

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

[Functional-component]

index.jsx
index.tsx
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>Textbox with clear button</h4>
                <TextBoxComponent placeholder="First Name" showClearButton={true} floatLabelType="Never"/>
            </div>
            <div className="textboxes">
                <h4>Floating textbox with clear button</h4>
                <TextBoxComponent placeholder="Last Name" showClearButton={true} floatLabelType="Auto"/>
            </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>Textbox with clear button</h4>
                <TextBoxComponent placeholder="First Name" showClearButton= {true} floatLabelType="Never"/>
            </div>
            <div className="textboxes">
                <h4>Floating textbox with clear button</h4>
                <TextBoxComponent placeholder="Last Name" showClearButton= {true} floatLabelType="Auto"/>
            </div>
        </div>
    )
}

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

Multi-line input with floating label

To create a multiline input using the multiline API, it will act as a TextArea component. You can also resize the rows.

[Class-component]

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
export default class App extends React.Component {
    render() {
        return (<TextBoxComponent
            id='default'
            placeholder="Address"
            floatLabelType="Auto"
            multiline="true"
        />);
    }
}
;
ReactDOM.render(<App />, document.getElementById('input-container'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
export default class App extends React.Component<{}, {}> {
    public render() {
        return (<TextBoxComponent
            id='default'
            placeholder="Address"
            floatLabelType="Auto"
            multiline="true"
        />
        )
    }
};

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

[Functional-component]

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    return (<TextBoxComponent
        id='default'
        placeholder="Address"
        floatLabelType="Auto"
        multiline="true"
    />);
}
ReactDOM.render(<App />, document.getElementById('input-container'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
    function App() {
        return (
            <TextBoxComponent
                id='default'
                placeholder="Address"
                floatLabelType="Auto"
                multiline="true"
            />
        )
    }

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

Groups in React TextBox component

With icon and floating label

With clear button and floating label

Multi-line input with floating label

See Also