How to add a floating label in React TextBox

9 Aug 202610 minutes to read

The floating label automatically floats above the TextBox input field when the user focuses on it or enters a value. This behavior enhances the visual hierarchy and provides clear input context. Configure the floating label behavior using the floatLabelType property with the following options:

Type Description
Auto The label floats above the input when focused or when a value is entered
Always The label always remains floating above the input
Never The label never floats; placeholder text is displayed instead (default behavior)

Implementation steps

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

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

  2. Configure the floating label by passing the HTML input element and floatLabelType property set to Auto (or another value) to the createInput method.

  3. Set the placeholder for the input element either via the placeholder attribute or as a parameter to createInput. The placeholder text serves as the floating label content.

  4. Optional: Add icons to enhance the input by passing the buttons property with the e-input-group-icon class to the createInput method.

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;
    input3;
    input4;
    render() {
        return (<div className="inner-container">
                <h4> FloatLabelType as Auto </h4>
                <input id="input-01" type="text" ref={ele1 => this.input1 = ele1}/>
                <h4> FloatLabelType as Always </h4>
                <input id="input-02" type="text" ref={ele2 => this.input2 = ele2}/>
                <h4> FloatLabelType as Never </h4>
                <input id="input-03" type="text" ref={ele3 => this.input3 = ele3}/>
                <h4> Float label input with icons </h4>
                <input id="input-04" type="text" ref={ele4 => this.input4 = ele4}/>
            </div>);
    }
    componentDidMount() {
        Input.createInput({
            element: this.input1,
            floatLabelType: "Auto",
            properties: {
                placeholder: 'Enter Name'
            }
        });
        Input.createInput({
            element: this.input2,
            floatLabelType: "Always",
            properties: {
                placeholder: 'Enter Name'
            }
        });
        Input.createInput({
            element: this.input3,
            floatLabelType: "Never",
            properties: {
                placeholder: 'Enter Name'
            }
        });
        // Render Float Label TextBox with Icon
        Input.createInput({
            buttons: ['e-input-group-icon e-input-down'],
            element: this.input4,
            floatLabelType: "Auto",
            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 input3: any;
    public input4: any;

    public render() {
        return (
            <div className="inner-container">
                <h4> FloatLabelType as Auto </h4>
                <input id="input-01" type="text" ref = {ele1 => this.input1 = ele1!} />
                <h4> FloatLabelType as Always </h4>
                <input id="input-02" type="text" ref = {ele2 => this.input2 = ele2!} />
                <h4> FloatLabelType as Never </h4>
                <input id="input-03" type="text" ref = {ele3 => this.input3 = ele3!} />
                <h4> Float label input with icons </h4>
                <input id="input-04" type="text" ref = {ele4 => this.input4 = ele4!} />
            </div>
        )
    }

    public componentDidMount() {

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

        Input.createInput({
            element: this.input2,
            floatLabelType: "Always",
            properties:{
                placeholder:'Enter Name'
            }
        });

        Input.createInput({
            element: this.input3,
            floatLabelType: "Never",
            properties:{
                placeholder:'Enter Name'
            }
        });

        // Render Float Label TextBox with Icon
        Input.createInput({
            buttons: ['e-input-group-icon e-input-down'],
            element: this.input4,
            floatLabelType: "Auto",
            properties:{
                placeholder:'Enter Value'
            }
        });
    }
}

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