컴포넌트
InputSearchExpand
돋보기 아이콘을 클릭하면 가로로 부드럽게 확장되어 텍스트 입력이 나타나는 검색 인풋으로, 자동 포커스·값 지우기·Enter 검색·Escape 접기를 지원한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/InputSearchExpand-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| placeholder | string | "검색어를 입력하세요" | 인풋 placeholder 문구 |
| expandedWidth | number | 240 | 펼쳤을 때 인풋 영역의 너비(px) |
| size | number | 44 | 아이콘 버튼 지름(px)이자 접힌 상태의 높이 |
| direction | "right" | "left" | "right" | 아이콘 기준 펼치는 방향 |
| defaultOpen | boolean | false | 접힘/펼침 초기 상태(비제어) |
| clearOnCollapse | boolean | true | 접힐 때 입력값을 초기화할지 여부 |