React Bootstrap Floating labels

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:

<FloatingLabel></FloatingLabel>

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

• TextAreas: Textareas should be wrapped inside <FloatingLabel></FloatingLabel>, 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 <FloatingLabel>, 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 <FloatingLabel>.

Javascript

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

function App() {
    return (
        <>
            <FloatingLabel
                controlId="floatingTextarea"
                label="Comment"
                className="m-5">
                <Form.Control as="textarea"
                              placeholder="Comment here..." />
            </FloatingLabel>
        </>);}
export default App;

Output:

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

Javascript

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

function App() {
    return (
        <FloatingLabel controlId="floating"
            label="Works with selects"
            className='m-4'>
            <Form.Select aria-label="Floating
                                     label
                                     select
                                     example">
                <option>Select Here...</option>
                <option value="mobile">Mobile</option>
                <option value="laptop">Laptop</option>
                <option value="tablet">Tablet</option>
            </Form.Select>
        </FloatingLabel>);}
export default App;

Output: