React Bootstrap Floating labels (original) (raw)

Last Updated : 28 Apr, 2025

Labels are the content tags through which we can target input fields and Floating labels are those tags that display inside the input tag, and when we start changing data, it comes over through floating. Floating Labels are used in form with multiple kinds of input fields like text, number, select, radio, etc.

**Syntax:

**Following input methods can be used with React Bootstrap Floating labels :

**TextAreas: Textareas should be wrapped inside ****,** and the input field should contain placeholders because this method applies CSS using placeholders pseudo selectors.
**Selects: Selects can also contain floating labels by using ****,** and selects will display placeholders for always; they never float like textareas.
**Layout: In the case of multiple input fields, every input field should be wrapped inside a **col component so that no floating label overlaps another one
**Customizing Rendering: If you need greater control over the rendering, use the <FormFloating> component to wrap your input and label.

**Example 1: In this approach we created a textarea and wrapped that textarea inside ****.**

JavaScript `

// App.js import FloatingLabel from 'react-bootstrap/FloatingLabel'; import Form from 'react-bootstrap/Form';

function App() { return ( <> <Form.Control as="textarea" placeholder="Comment here..." /> </>);} export default App;

**Output:

Animation

**Example 2: In this example we created ****<Form.Select>** with multiple options and then we wrapped it inside .

JavaScript `

// App.js import FloatingLabel from 'react-bootstrap/FloatingLabel'; import Form from 'react-bootstrap/Form';

function App() { return ( <Form.Select aria-label="Floating label select example"> </Form.Select> );} export default App;

**Output:

Animation