Floating Labels

  1. Form Elements
  2. Floating Labels
Basic Examples

 <FloatingLabel
 controlId="floatingInput"
 label="Email address"
 className="mb-3">
 <Form.Control type="email" placeholder="name@example.com" />
</FloatingLabel>
<FloatingLabel controlId="floatingPassword" label="Password">
 <Form.Control type="password" placeholder="Password" />
</FloatingLabel>
Readonly plain text

     <input type="email" readOnly className="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="name@example.com"/>
     <label htmlFor="floatingEmptyPlaintextInput">Empty input</label>
 </div>
 <div className="form-floating">
     <input type="email" readOnly className="form-control-plaintext" id="floatingPlaintextInput" placeholder="name@example.com" value="name@example.com"/>
     <label htmlFor="floatingPlaintextInput">Input with value</label>
 </div>
</div>
Floating Labels With Pre Defined Values
<Form.Floating className="my-3">
<Form.Control type="email" className="form-control" id="floatingInputValue"
    placeholder="name@example.com" defaultValue="test@example.com"/>
<Form.Label htmlFor="floatingInputValue">Input with value</Form.Label>
</Form.Floating>
<div className="form-flotin">
<Form.Control type="email" className="is-invalid"
    id="floatingInputInvalid" placeholder="name@example.com"
    defaultValue="test@example.com"/>
<Form.Label htmlFor="floatingInputInvalid">Invalid input</Form.Label>
</div>
Textareas

 <FloatingLabel
 controlId="floatingInput"
 label="Email address"
 className="mb-3">
 <Form.Control type="email" placeholder="name@example.com" />
</FloatingLabel>
<FloatingLabel controlId="floatingPassword" label="Password">
 <Form.Control type="password" placeholder="Password" />
</FloatingLabel>
Floating Labels In Select

  <FloatingLabel controlId="floatingSelect" label="Works with selects">
  <Form.Select aria-label="Floating label select example">
      <option>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
  </Form.Select>
  </FloatingLabel>
Floating Labels With Layouts

  <div className="row g-2">
  <div className="col-md">
      <Form.Floating className="">
          <Form.Control type="email" className="form-control" id="floatingInputGrid"
              placeholder="name@example.com" defaultValue="mdo@example.com"/>
          <Form.Label htmlFor="floatingInputGrid">Email address</Form.Label>
      </Form.Floating>
  </div>
  <div className="col-md">
  <FloatingLabel controlId="floatingSelect" label="Works with selects">
      <Form.Select aria-label="Floating label select example" className='form-select'>
          <option>Open this select menu</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
      </Form.Select>
      </FloatingLabel>
  </div>
</div>
Floating Label Colors

 <Row className="gy-4">
 <Col xl={4} className="">
     <Form.Floating className="mb-4 floating-primary">
         <Form.Control type="email" className="" id="floatingInputprimary" placeholder="name@example.com"/>
         <Form.Label htmlFor="floatingInputprimary">primary</Form.Label>
     </Form.Floating>
 </Col>
 <Col xl={4} className="">
     <Form.Floating className="mb-4 floating-secondary">
         <Form.Control type="email" className="" id="floatingInputsecondary" placeholder="name@example.com"/>
         <Form.Label htmlFor="floatingInputsecondary">secondary</Form.Label>
     </Form.Floating>
 </Col>
 <Col xl={4} className="">
     <Form.Floating className="mb-4 floating-warning">
         <Form.Control type="email" className="" id="floatingInputwarning" placeholder="name@example.com"/>
         <Form.Label htmlFor="floatingInputwarning">warning</Form.Label>
     </Form.Floating>
 </Col>
 <Col xl={4} className="">
     <Form.Floating className="mb-4 floating-info">
         <Form.Control type="email" className="" id="floatingInputinfo" placeholder="name@example.com"/>
         <Form.Label htmlFor="floatingInputinfo">info</Form.Label>
     </Form.Floating>
 </Col>
 <Col xl={4} className="">
     <Form.Floating className="mb-4 floating-success">
         <Form.Control type="email" className="" id="floatingInputsuccess" placeholder="name@example.com"/>
         <Form.Label htmlFor="floatingInputsuccess">success</Form.Label>
     </Form.Floating>
 </Col>
 <Col xl={4} className="">
     <Form.Floating className="mb-4 floating-danger">
         <Form.Control type="email" className="" id="floatingInputdanger" placeholder="name@example.com"/>
         <Form.Label htmlFor="floatingInputdanger">danger</Form.Label>
     </Form.Floating>
 </Col>
</Row>