Bootstrap floating labels keep floating even without input

[amo13]

Environment

• Ruby 3.2.2
• Rails 7.0.5
• Simple Form 5.2

Current behavior

<main class="d-flex align-items-center py-4 bg-body-tertiary">
  <div class="form-signin w-100 px-3 m-auto" style="max-width: 460px;">
    <%= simple_form_for @user, url: user_registration_path, 
                        wrapper: :floating_labels_form,
                        wrapper_mappings: {
                          select: :floating_labels_select
                        } do |f| %>

      <%= f.error_notification %>

      <div class="form-inputs">
        <%= f.input :email, required: true, input_html: { autocomplete: "email" } %>
        <div class="form-floating">  <!-- for comparison -->
          <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
          <label for="floatingInput">Email address</label>
        </div>
      </div>

      <div class="form-actions">
        <%= f.submit class: "btn btn-primary" %>
      </div>
    <% end %>

    <%= render "devise/shared/links" %>
  </div>

</main>

The generated HTML is:

<main class="d-flex align-items-center py-4 bg-body-tertiary">
  <div class="form-signin w-100 px-3 m-auto" style="max-width: 460px;">
    <form class="simple_form new_user" id="new_user" novalidate="novalidate" action="/users" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="ASCOUhV4M8HGPxUuAlfdcTmWVIHBGJEb5yZi7ZDmMcBIW9br6smB-Elpm7AWyWZ89ltwg95ODP5eeTvsYWGHlQ" autocomplete="off">
      <div class="form-inputs">
        <div class="form-floating mb-3 email required user_email">
           <input class="form-control string email required" autocomplete="email" required="required" aria-required="true" type="email" value="" name="user[email]" id="user_email">
           <label class="email required" for="user_email">
             Email <abbr title="required">*</abbr>
           </label>
        </div>
        <div class="form-floating">
          <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
          <label for="floatingInput">Email address</label>
        </div>
      </div>

      <div class="form-actions">
        <input type="submit" name="commit" value="Create User" class="btn btn-primary" data-disable-with="Create User">
      </div>
    </form>
    <a href="/users/sign_in">Log in</a><br>
    <a href="/users/confirmation/new">Didn't receive confirmation instructions?</a><br>
    <a href="/users/unlock/new">Didn't receive unlock instructions?</a><br>
  </div>
</main>

Expected behavior

The html generated with the form helper should look and behave the same as the floating labels bootstrap example (inserted without the helper for comparison)

[amo13]

I am sorry, it seems that I was just missing the placeholder which needs to be set.