컴포넌트
Input Password Strength
입력할수록 자체 엔트로피 휴리스틱으로 강도를 판정해 색/폭이 변하는 세그먼트 바와 요구조건 체크리스트로 비밀번호 강도를 시각화하는 입력 컴포넌트.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/InputPasswordStrength-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| placeholder | string | "비밀번호를 입력하세요" | 입력 필드의 placeholder 텍스트. |
| label | string | "비밀번호" | 라벨 및 접근성(aria-label) 텍스트. |
| showRequirements | boolean | true | 요구조건(길이/대소문자/숫자/특수문자) 체크리스트 표시 여부. |
| showToggle | boolean | true | 비밀번호 보이기/숨기기 토글 버튼 표시 여부. |
| defaultValue | string | "" | 비제어 초기 비밀번호 값(데모에서 바로 타이핑 가능). |
| onChange | (value: string, score: number) => void | undefined | 값 변경 시 현재 값과 강도 점수(0~4)를 전달하는 콜백. |