Password Input

Recipe CSS

This is the exact CSS your kit ships for Password Input — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === PasswordInput (#6) === */
.pwinput__eye {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-right: var(--k-s-4);
  border: 0;
  background: transparent;
  color: var(--k-fg-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 999px;
}
.pwinput__eye:hover { background: var(--k-state-hover); color: var(--k-fg); }
/* Strength meter — wider bars (48px vs 36px) + thicker (4px vs 3px) read
 * more confidently. Smooth background transition so a level change feels
 * dynamic rather than stepped. Nielsen Norman / Baymard both recommend
 * visible scale + named feedback label. */
.pwinput__strength {
  display: flex;
  align-items: center;
  gap: var(--k-s-4);
  margin-top: var(--k-s-8);
}
.pwinput__bar {
  flex: 1;
  max-width: 48px;
  height: 4px;
  border-radius: 999px;
  background: var(--k-surface-2);
  border: var(--k-hairline, 1px solid var(--k-border));
  transition: background var(--k-dur, 200ms) var(--k-ease), border-color var(--k-dur, 200ms) var(--k-ease);
}
.pwinput__bar--on[data-level="1"] { background: var(--k-danger); border-color: transparent; }
.pwinput__bar--on[data-level="2"] { background: var(--k-warning); border-color: transparent; }
.pwinput__bar--on[data-level="3"] { background: var(--k-success); border-color: transparent; }
.pwinput__label {
  font-size: var(--k-type-caption);
  color: var(--k-fg-muted);
  margin-left: var(--k-s-6);
}
/* Caps-lock warning — show when the input detects Caps Lock (getModifierState).
 * A quiet warning-toned hint below the field, not an error (the password may be
 * intentional). Render/remove it from the consumer's keydown/keyup handler. */
.pwinput__capslock {
  display: flex;
  align-items: center;
  gap: var(--k-s-6);
  margin-top: var(--k-s-6);
  font-size: var(--k-type-caption);
  color: var(--k-warning-soft-fg);
}
.pwinput__capslock svg { width: var(--k-icon-xs); height: var(--k-icon-xs); flex: none; }