컴포넌트
InputClearButton
입력값이 있을 때만 우측 지우기(×) 버튼이 부드럽게 페이드 인 되고, 클릭 또는 Escape로 값을 비우면 다시 페이드 아웃 되는 텍스트 입력 컴포넌트.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/InputClearButton-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| defaultValue | string | "" | 비제어 모드의 초기 입력값. 값이 있으면 마운트 즉시 지우기 버튼이 보인다. |
| placeholder | string | "검색어를 입력하세요" | 입력값이 비었을 때 표시되는 플레이스홀더 문구. |
| label | string | "입력" | 입력창의 접근성 레이블(aria-label). |
| clearLabel | string | "입력 내용 지우기" | 지우기(×) 버튼의 접근성 레이블(aria-label). |
| width | number | 300 | 입력창 너비(px). |
| disabled | boolean | false | true이면 입력 및 지우기 버튼을 모두 비활성화한다. |