컴포넌트
Toggle Morph Check
켜면 노브 원이 오른쪽으로 슬라이드하며 그 위에 SVG 체크마크가 stroke-dashoffset로 그려져 노브가 체크로 모프되는 토글. 트랙은 바이올렛→마젠타 그라데이션으로 전환되고 티얼 확정 링이 팽창-소멸한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ToggleMorphCheck-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| defaultChecked | boolean | false | 비제어 초기 체크 상태. |
| onChange | (checked: boolean) => void | undefined | 상태 변경 시 체크 여부를 전달하는 콜백. |
| disabled | boolean | false | 비활성화 여부. |
| size | "sm" | "md" | "lg" | "md" | 트랙/노브 크기 프리셋. |
| checkColor | string | "#5EEAD4" | 체크 획 및 확정 링 색(브랜드 티얼). |
| className | string | "" | 버튼에 추가할 CSS 클래스. |