Search code examples
htmlreactjsreact-bootstrapbootstrap-5

How to enable Placeholder for Floating Input Field in react?

bootstrap based Floating input place holder value not able to change. wanted to show some text as default like placeholder & should enable the placeholder/value area editable. Please help

https://codesandbox.io/s/floating-input-placeholder-zvzmq0

<div class="form-floating mb-3 ">
        <input
          type="text"
          class="form-control  "
          id="floatingInput"
          placeholder="Enter text here …"
          value={"Enter text here …"}
        />
        <label for="floatingInput">Email address</label>
      </div>
Solution

  • It's not intended to show placeholder, when using a floating label.

    When no value is provided the label is displayed in the middle of the input and covers the space where a placeholder is normally shown. When value is provided label floats to the top corner of the input and below you can see your specified value.

    enter image description here

    Technically you need to provide a placeholder value, but it's not shown:

    A placeholder is required on each <Form.Control> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element.

    https://react-bootstrap.netlify.app/forms/floating-labels/

    Here is a working codesanbox with floating labels and changeable value: https://codesandbox.io/s/floating-input-placeholder-forked-3tvf50