floating label on the top left corner of an input field when active

Question

So I have an existing ruby on rails project that looks like this

      = f.input :p_number,
              required: true,
              autocomplete: false,
              placeholder: t('users.form.placeholders.p_number')

      = f.input :email,
              required: true,
              as: :email,
              :wrapper => :input_wrapper,
              label: t('simple_form.labels.user.email')

      = f.input :phone,
              required: true,
              :wrapper => :input_wrapper

      = f.submit t(".submit"), class: "button primary small-expanded", id: "submit"

I would like the label to be placed on the top left corner of the input field when text is inserted. Anyone here that could help? I would appreciate it very much :)

It should look like this

I tried implementing the one in codepen but it still doesnt work.

Answer 1

Hej, Try this. I have rendered the HTML to show the snippet

window.addEventListener('DOMContentLoaded', () => {
  const formId = document.getElementById('formID')
  formID.addEventListener('input', (e) => {
    const tgt = e.target;
    tgt.classList.toggle('filled', tgt.value.trim() !== '')
  });
});

.form-input {
    position: relative;
    margin-bottom: 20px;
  }
  .form-input input {
    width: 100%;
    padding: 12px 8px 8px 8px;
    border: 1px solid #ccc;
    border-radius: 15px;
    font-size: 16px;
  }
  .form-input label {
    position: absolute;
    left: 10px;
    top: 18px;
    color: #999;
    transition: all 0.3s ease;
    pointer-events: none;
    font-size: 16px;
  }
  .form-input input:focus + label,
  .form-input input:not(:placeholder-shown) + label {
    top: 2px;
    font-size: 12px;
    color: #333;
  }
  button {
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

<form id="formID">
  <div class="form-input">
    <input type="text" id="p_number" name="p_number" required placeholder=" ">
    <label for="p_number">Personal Number</label>
  </div>
  <div class="form-input">
    <input type="email" id="email" name="email" required placeholder=" ">
    <label for="email">Email</label>
  </div>
  <div class="form-input">
    <input type="tel" id="phone" name="phone" required placeholder=" ">
    <label for="phone">Phone</label>
  </div>
  <button type="submit">Submit</button>
</form>

Here are the ruby changes

= simple_form_for @user do |f|
  .form-input
    = f.input :p_number, required: true, placeholder: false, input_html: { required: "required" }
    %label{ for: "user_p_number" }= t('users.form.placeholders.p_number')

  .form-input
    = f.input :email, required: true, as: :email, placeholder: false, wrapper: :input_wrapper, input_html: { required: "required" }
    %label{ for: "user_email" }= t('simple_form.labels.user.email')

  .form-input
    = f.input :phone, required: true, wrapper: :input_wrapper, placeholder: false, input_html: { required: "required" }
    %label{ for: "user_phone" }= t('simple_form.labels.user.phone')

  = f.submit t(".submit"), class: "button primary small-expanded", id: "submit"