컴포넌트
InputUnderlineFocus
포커스 시 브랜드 그라데이션 밑줄이 중앙에서 좌우로 확장되는 플로팅 라벨 텍스트 인풋입니다.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/InputUnderlineFocus-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | "이메일" | 포커스/값 존재 시 위로 떠오르는 플로팅 라벨 텍스트 (aria-label로도 사용). |
| placeholder | string | "you@example.com" | 라벨이 떠오른 뒤 노출되는 플레이스홀더 문구. |
| tone | "brand" | "mint" | "brand" | 확장 밑줄의 색조. brand는 퍼플→핑크, mint는 민트→퍼플 그라데이션. |
| type | string | "text" | input 요소의 type 속성 (text/email/password 등). |
| durationMs | number | 380 | 밑줄 확장 및 라벨 전환 애니메이션 시간(ms). reduced-motion 시 0으로 강제. |
| width | number | 260 | 인풋 컨테이너 너비(px). |