PasswordInput

개요

예시

이렇게 · 이렇게 하지 않기

• 이렇게 규칙(12자 이상)은 입력 아래에 항상 보이고 강도 미터는 쓰지 않는다. 비밀번호 관리자의 붙여넣기와 자동 완성을 막지 않는다. 보기 토글은 IconButton이고 상태를 aria-pressed로 알린다.
• 이렇게 라벨은 항상 보이게 둔다. placeholder는 예시일 뿐 라벨이 아니다.
• 이렇게 규칙은 처음부터 보이게 둔다. 실패한 뒤에야 알려 주지 않는다.
• 이렇게 하지 않기 강도 미터를 두지 않는다. 붙여넣기와 비밀번호 관리자를 막지 않는다.
• 이렇게 하지 않기 토글할 때 이름을 “숨기기”로 바꾸지 않는다.

토큰과 속성

접근성

키보드: Tab 순서: 입력 → 보기 토글. 토글을 눌러도 초점은 토글에 남고 커서 위치는 유지된다.

• 입력의 aria-describedby = 도움말 → 규칙 목록 → 오류.
• 규칙 충족은 입력할 때마다 알리지 않는다. 각 항목의 텍스트로 읽힌다.
• aria-describedby 순서는 도움말 → 오류. 오류가 있으면 aria-invalid="true".
• 오류는 alert로 알리지 않는다. 제출 실패 시 FormLayout이 첫 오류 필드로 초점을 옮긴다.
• 붙여넣기를 막지 않는다. 라벨 포함 행이 44px 이상이다.

함께 보기

• Input
• FieldMessage
• IconButton