Floating Label in React TextArea

9 Aug 20266 minutes to read

The floating label functionality in the TextArea component allows the placeholder text to float above the TextArea while the user interacts with it, providing a more intuitive user experience. This feature can be achieved using the floatLabelType API, which offers various options for defining the floating behavior:

Type Description
Auto The label floats above the TextArea when it receives focus or input, returning to its initial position when the TextArea loses focus and contains no value.
Always The label always remains floating above the TextArea, regardless of user interaction.
Never The label never floats; it remains in its default position within the TextArea. 
// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render TextArea.
function App() {
    return (<div className='wrap'>
            <TextAreaComponent id='default' placeholder='Enter your comments' floatLabelType='Auto'></TextAreaComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('input-container'));
// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render TextArea.
function App() {
  
    return (
        <div className='wrap'>
            <TextAreaComponent id='default' placeholder='Enter your comments' floatLabelType='Auto'></TextAreaComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('input-container'));

Placeholder with localization

Use the localization library to localize placeholder text to different cultures by setting the locale property.

// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render TextArea.
function App() {
    return (
        <div className='wrap'>
            <TextAreaComponent id="default" placeholder="veuillez inscrire vos commentaires" locale="fr-BE" floatLabelType="Auto"></TextAreaComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('input-container'));
// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render TextArea.
function App() {
  
    return (
        <div className='wrap'>
            <TextAreaComponent id="default" placeholder="veuillez inscrire vos commentaires" locale="fr-BE" floatLabelType="Auto"></TextAreaComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('input-container'));

To load translation object in an application use load function of L10n class.
In the below sample, German culture is loaded to the TextArea placeholder text.

// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import { L10n } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// Load culture for textarea
L10n.load({
    'de-DE': {
       'textarea': {'placeholder': "Geben Sie Ihre Kommentare ein"}
     }
});

// To render TextArea.
function App() {
    return (
        <div className='wrap'>
            <TextAreaComponent id="default" locale="de-DE" floatLabelType="Auto"></TextAreaComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('input-container'));
// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import { L10n } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// Load culture for textarea
L10n.load({
    'de-DE': {
       'textarea': {'placeholder': "Geben Sie Ihre Kommentare ein"}
     }
});

// To render TextArea.
function App() {
  
    return (
        <div className='wrap'>
            <TextAreaComponent id="default" locale="de-DE" floatLabelType="Auto"></TextAreaComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('input-container'));