컴포넌트
MultiStepFormProgress
스텝 도트와 연결 라인, 상단 진행 바로 다단계 폼의 진행 상태를 시각화하고 스텝별 입력 검증과 완료 화면까지 제공하는 인디케이터.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/MultiStepFormProgress-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| steps | MultiStepFormStep[] | 기본 3단계 회원가입 폼 | 각 스텝의 제목·안내·입력 필드 정의 목록. 미지정 시 계정/프로필/확인 3단계 기본 폼. |
| showLabels | boolean | true | 스텝 도트 아래 제목 라벨 표시 여부. |
| accentColor | string | #C084FC | 진행/현재 스텝 강조 색(그라디언트 시작). |
| accentAltColor | string | #EC4899 | 진행 바·라인 그라디언트 보조 색. |
| successColor | string | #5EEAD4 | 완료 화면 체크 및 강조 색. |
| onSubmit | (values: Record<string, string>) => void | undefined | 마지막 스텝 검증 통과 시 수집한 전체 폼 값과 함께 호출되는 콜백. |