Float Label

<!-- Float Label — input label that floats up on focus
     The placeholder=" " (space) trick drives the CSS state. -->
<div class="nuda-float-label">
  <input class="nuda-float-label__input" type="text" id="nuda-email" placeholder=" " />
  <label class="nuda-float-label__label" for="nuda-email">Your email</label>
</div>

/* ── Float Label ─────────────────────────────────────────────
   Uses :placeholder-shown + :focus to float the label.
   Customize:
     --nuda-fl-clr        : accent color (focus)
     --nuda-fl-border     : default border color
     --nuda-fl-radius     : border radius
     --nuda-fl-label-clr  : label text color
   ──────────────────────────────────────────────────────────── */
.nuda-float-label {
  --nuda-fl-clr: #6366f1;
  --nuda-fl-border: #d1d5db;
  --nuda-fl-radius: 8px;
  --nuda-fl-label-clr: #9ca3af;

  position: relative;
  width: 100%;
  max-width: 320px;
}

.nuda-float-label__input {
  width: 100%;
  padding: 18px 16px 6px;
  font-size: 1rem;
  border: 2px solid var(--nuda-fl-border);
  border-radius: var(--nuda-fl-radius);
  outline: none;
  background: transparent;
  transition: border-color 0.2s ease;
}

.nuda-float-label__label {
  position: absolute;
  left: 14px;
  top: 14px;
  font-size: 1rem;
  color: var(--nuda-fl-label-clr);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.2s ease, color 0.2s ease, font-size 0.2s ease;
}

/* Float up when focused or has value */
.nuda-float-label__input:focus + .nuda-float-label__label,
.nuda-float-label__input:not(:placeholder-shown) + .nuda-float-label__label {
  transform: translateY(-10px) scale(0.75);
  color: var(--nuda-fl-clr);
}

.nuda-float-label__input:focus {
  border-color: var(--nuda-fl-clr);
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-float-label__label,
  .nuda-float-label__input {
    transition: none;
  }
}