Web Designer Wall

Snippets Animation

Bootstrap 5 Floating Label Form with Password Strength

A sign-up form with floating labels, a show/hide password button and a live password strength meter.

Bootstrap 5 No jQuery Mar 2020 2.4K views 

<section class="wdw-stage">
  <div class="container" style="max-width:940px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <aside class="col-md-5 wdw-aurora d-none d-md-flex flex-column justify-content-between p-4 p-lg-5">
          <span class="wdw-eyebrow text-white-50">Why join</span>
          <div>
            <h2 class="h3 fw-bold mb-4">Ship your next project faster.</h2>
            <ul class="list-unstyled d-grid gap-3 mb-4 small">
              <li class="d-flex gap-2"><svg class="flex-shrink-0" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg>Unlimited projects, free forever</li>
              <li class="d-flex gap-2"><svg class="flex-shrink-0" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg>Sync across all your devices</li>
              <li class="d-flex gap-2"><svg class="flex-shrink-0" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg>No credit card required</li>
            </ul>
            <figure class="mb-0 small opacity-75"><blockquote class="mb-1">“Set up in two minutes. Our whole team was in by lunch.”</blockquote><figcaption>Maya R., Product Lead</figcaption></figure>
          </div>
        </aside>
        <div class="col-md-7 p-4 p-lg-5">
          <span class="wdw-eyebrow">Get started</span>
          <h1 class="h2 wdw-heading mt-1 mb-1">Create your account</h1>
          <p class="wdw-muted mb-3">Labels float up as you type, so nothing is ever hidden.</p>
          <div id="flDone" class="alert alert-success d-none align-items-center gap-2" role="status" tabindex="-1">
            <svg class="flex-shrink-0" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg>
            <span><strong>Account created.</strong> Welcome aboard!</span>
          </div>
          <form id="flForm" novalidate>
            <div class="form-floating mb-3">
              <input type="email" class="form-control" id="flEmail" placeholder="E-mail" autocomplete="email" required>
              <label for="flEmail">E-mail</label>
              <div class="invalid-feedback">Enter a valid e-mail address.</div>
            </div>
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="flUser" placeholder="Username" autocomplete="username" minlength="3" required>
              <label for="flUser">Username</label>
              <div class="invalid-feedback">At least 3 characters.</div>
            </div>
            <div class="position-relative mb-2">
              <div class="form-floating">
                <input type="password" class="form-control pe-5" id="flPass" placeholder="Password" autocomplete="new-password" minlength="8" aria-describedby="flHint flReqs" required>
                <label for="flPass">Password</label>
                <div class="invalid-feedback">At least 8 characters.</div>
              </div>
              <button type="button" class="btn btn-link fl-eye text-body-secondary" id="flToggle" aria-label="Show password" aria-pressed="false">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>
              </button>
            </div>
            <div class="d-flex gap-1 mb-1" id="flMeter" role="progressbar" aria-label="Password strength" aria-valuemin="0" aria-valuemax="4" aria-valuenow="0">
              <span class="fl-seg"></span><span class="fl-seg"></span><span class="fl-seg"></span><span class="fl-seg"></span>
            </div>
            <p class="small wdw-muted mb-2" id="flHint">Password strength: not set yet</p>
            <ul class="list-unstyled d-flex flex-wrap gap-2 mb-4 small" id="flReqs" aria-label="Password requirements">
              <li class="fl-req" data-req="len"><span class="fl-dot" aria-hidden="true"></span>8+ characters</li>
              <li class="fl-req" data-req="num"><span class="fl-dot" aria-hidden="true"></span>A number</li>
              <li class="fl-req" data-req="sym"><span class="fl-dot" aria-hidden="true"></span>A symbol</li>
            </ul>
            <button class="btn btn-primary w-100 rounded-pill" type="submit">Create account</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More animation snippets