PasswordField
원본: projects/skill-lens/design/components/PasswordField/README.md
상태: Experimental(초안), 접근성 △, 다크 ✓, 코드 ✗
보기 켜고 끄기, 규칙, 일치 확인
비밀번호 입력란입니다. 보기 켜고 끄기, 규칙 안내, 다시 입력의 일치 확인이 붙습니다.
쓰는 곳
비밀번호 만들기, 로그인, 비밀번호 바꾸기.
구성(화면이 넘겨줄 것)
라벨, 규칙 문장, 값, 오류.
규칙
- 규칙("8자 이상, 영문과 숫자")은 처음부터 보이고, 맞으면 그 줄이 끝남 톤으로 바뀝니다.
- 다시 입력은 칸을 벗어난 뒤에 일치를 확인합니다(치는 중에는 오류를 띄우지 않음).
- 보기 버튼은 칸 오른쪽 끝, 누름 영역 40.
- 붙여넣기와 비밀번호 관리자를 막지 않습니다.
접근성
- 보기 버튼은
aria-pressed, 라벨 "비밀번호 보기". autocomplete="new-password"또는current-password.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Forms" height=220 subtitle="보기 켜고 끄기, 규칙, 일치 확인" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.stack{display:flex;flex-direction:column;gap:var(--space-3)}.wrap{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}</style>
<div class="sl stack">
<div class="sl-form"><label class="sl-field is-filled"><span class="sl-field__label">비밀번호</span><span class="sl-field__box"><input class="sl-field__input" type="password" value="abcd1234"><button class="sl-field__reveal" aria-pressed="false">보기</button></span><span class="sl-field__help sl-field__help--ok">8자 이상, 영문과 숫자를 섞었어요</span></label><label class="sl-field is-error"><span class="sl-field__label">비밀번호 다시 입력</span><span class="sl-field__box"><input class="sl-field__input" type="password" value="abcd12"></span><span class="sl-field__help">두 비밀번호가 달라요. 다시 입력해 주세요.</span></label></div>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.