DSDesignSkill
|

/컴포넌트/다단계 폼

새 창 ↗
자산 미리보기 이미지

1440px 풀페이지 캡처 · 실화면 탭에서 라이브 확인

설명

긴 입력을 여러 단계로 나누는 마법사형 폼 4종입니다. 기본형은 상단에 진행 바와 4단계 인디케이터를 두고 현재 단계 입력, 임시 저장과 이전·다음 버튼을 한 줄에 배치하며, 좁은 화면에서는 단계 라벨을 숨겨 아이콘만 남깁니다. 사이드 스텝형은 왼쪽 세로 단계 목록에 각 단계의 입력값 요약을 함께 보여주고 오른쪽에 현재 폼을 둡니다. 미니멀형은 얇은 진행 바와 백분율만으로 위치를 알리며, 완료 단계는 접수번호와 신청 내역 요약을 정의 목록으로 정리합니다. 진행 바에는 role="progressbar"와 aria-valuenow를 지정해 보조기기에서도 진행률을 읽을 수 있습니다.

변경 이력

v1.0.02026-07-27

최초 공개