컴포넌트
TogglePasswordVisibility
눈 아이콘을 눌러 비밀번호 입력칸을 표시/숨김 전환하며, 슬래시가 그려지고 동공이 축소되는 순수 SVG 애니메이션을 보여주는 컴포넌트.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/TogglePasswordVisibility-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| defaultVisible | boolean | false | 초기 표시 상태(비제어). false면 가려진(password) 상태로 시작. |
| placeholder | string | "비밀번호를 입력하세요" | 입력칸 placeholder 텍스트. |
| size | "sm" | "md" | "lg" | "md" | 인풋 높이/폰트/아이콘 크기 프리셋. |
| width | number | 260 | 인풋 컨테이너 전체 너비(px). |
| disabled | boolean | false | 비활성화 여부(입력·토글 모두 차단). |
| label | string | "비밀번호" | 접근성 라벨(aria-label 및 버튼 라벨 접두어). |