컴포넌트
SelectAnimated
트리거를 열면 옵션이 스태거 슬라이드-인으로 펼쳐지고 좌측 인디케이터 바가 활성 옵션으로 이동하는, 키보드 접근(화살표·Home/End·타입어헤드·Enter/Esc)을 갖춘 애니메이션 커스텀 셀렉트.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SelectAnimated-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| options | SelectAnimatedOption[] | 5-item preset | 표시할 옵션 목록({value?, label, icon?, disabled?}). 미지정 시 기본 데이터 사용. |
| defaultValue | string | undefined | 비제어 초기 선택 value. 없으면 미선택 상태로 placeholder 표시. |
| placeholder | string | "옵션을 선택하세요" | 선택이 없을 때 트리거에 표시할 안내 문구. |
| accentColor | string | "#C084FC" | 활성/인디케이터/포커스 링 강조 색상. |
| stagger | number | 34 | 옵션 진입 스태거 간격(ms). reduced-motion 시 0. |
| onChange | (option, index) => void | undefined | 선택 확정 시 호출되는 콜백(옵션과 인덱스 전달). |