컴포넌트
InputFloatingLabel
포커스하거나 값을 입력하면 라벨이 위로 떠오르며 브랜드 그라디언트 언더라인이 좌우로 퍼지는 플로팅 라벨 인풋.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/InputFloatingLabel-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | "이메일 주소" | 떠오르는 라벨 텍스트 (placeholder 역할을 대신함). |
| type | "text" | "email" | "password" | "tel" | "url" | "search" | "text" | HTML input 타입 (화이트리스트로 제한). |
| defaultValue | string | "" | 비제어 모드 초기 값 (데모에서 바로 타이핑 가능). |
| helperText | string | "" | 인풋 하단에 표시할 보조 도움말 문구. |
| errorText | string | undefined | 지정 시 에러 스타일 적용 + helperText 대신 표시 (aria-invalid/role=alert). |
| width | number | 288 | 인풋 전체 폭(px). |