Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Password field

A masked field that also has to offer a way to check what was typed.

Inputs

Live preview

Source

<div class="dc-pw">
  <label class="dc-pw__label" for="dc-pw-a">비밀번호</label>
  <div class="dc-pw__box">
    <input class="dc-pw__input" id="dc-pw-a" type="password" value="hyunjang2026" autocomplete="current-password" aria-describedby="dc-pw-a-hint" />
    <button class="dc-pw__eye" type="button" aria-pressed="false" aria-controls="dc-pw-a" data-dc-pw="dc-pw-a">
      <span class="dc-pw__eyeicon" aria-hidden="true">◉</span>
      <span class="dc-sr">비밀번호 보기</span>
    </button>
  </div>
  <p class="dc-pw__hint" id="dc-pw-a-hint">대소문자를 구분합니다</p>
</div>
.dc-pw { max-width:400px; font-family:var(--dc-font); }
.dc-pw__label { display:block; margin-bottom:var(--dc-2); font-size:13px; font-weight:600; color:var(--dc-text); }
.dc-pw__box { display:flex; align-items:center; border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); }
.dc-pw__box:focus-within { border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }
.dc-pw__box.is-error { border-color:var(--dc-danger); }
.dc-pw__input { flex:1 1 auto; min-width:0; min-height:44px; padding:var(--dc-2) var(--dc-3); border:0; border-radius:var(--dc-r-sm); background:transparent; color:var(--dc-text); font:inherit; font-size:15px; letter-spacing:.04em; }
.dc-pw__input:focus { outline:none; }
.dc-pw__eye { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:44px; height:44px; border:0; border-radius:var(--dc-r-sm); background:transparent; color:var(--dc-text-sub); }
.dc-pw__eye:hover { background:var(--dc-sunken); color:var(--dc-brand-text); }
.dc-pw__eye[aria-pressed="true"] { color:var(--dc-brand-text); }
.dc-pw__eyeicon { font-size:16px; line-height:1; }
.dc-pw__hint { margin:var(--dc-2) 0 0; font-size:12px; color:var(--dc-text-mute); }
.dc-pw__error { margin:var(--dc-2) 0 0; font-size:12px; font-weight:600; color:var(--dc-danger); }
.dc-pw__meter { display:flex; gap:var(--dc-1); margin-top:var(--dc-2); }
.dc-pw__seg { flex:1 1 0; height:5px; border-radius:var(--dc-r-full); background:var(--dc-sunken); }
.dc-pw__seg.is-on { background:var(--dc-ok); }
.dc-pw__level { margin:var(--dc-1) 0 0; font-size:12px; font-weight:600; color:var(--dc-ok); }
document.querySelectorAll('[data-dc-pw]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var input = document.getElementById(btn.getAttribute('data-dc-pw'));
    if (!input) return;
    var show = input.type === 'password';
    input.type = show ? 'text' : 'password';
    btn.setAttribute('aria-pressed', show ? 'true' : 'false');
    var name = btn.querySelector('.dc-sr');
    if (name) name.textContent = show ? '비밀번호 숨기기' : '비밀번호 보기';
    input.focus();
  });
});

How to use it

  • Let the reveal toggle report its state with aria-pressed, and swap its label between show and hide
  • Put the rules in front of people before they type, not after they fail
  • Prefer one reveal toggle over asking for the password twice

Watch out for

  • Keep the cursor in the field after the toggle is pressed — don't make anyone click back in
  • A strength meter needs a word like "strong" beside the bars; color alone is not a reading

Next