Stepper Usage

특정한 과업을 수행하기 위한 단계를 순차적으로 보여주며 사용자를 안내합니다.

Layout

Placement

Stepper는 page 또는 dialog 내부에 위치할 수 있습니다.

Content

Stepper 내부에는 사용자 입력이 이루어지는 다양한 형태의 컴포넌트들이 form 형태로 포함될 수 있습니다. Stepper는 데이터 입력이 요구되는 항목들을 유사한 성격으로 묶어 구성한 연속된 단계로 쪼개어 사용자의 입력을 유도합니다. 각 step의 title은 간결하면서도 해당 step에서 요구하는 입력 내용을 모두 포괄하는 형태로 작성하여야 합니다.

Step 내부의 모든 항목이 선택 항목일 경우 step title을 optional로 표기합니다.

Behaviors

Interactions

버튼 그룹의 상태

Back 버튼은 항상 활성화된 상태로 제공되는 반면 다음 단계로 이동하는 Next 버튼이나 입력을 제출하는 액션 버튼은 사용자 입력이 있는 경우에만 활성화됩니다. 필요한 경우 Next 버튼이나 액션 버튼을 클릭할 때 입력에 대한 validation이 이루어집니다.

Active & Complete Steps

한 번에 한 step만 활성화되며, 다음 step으로 이동할 때 현재 step은 닫힙니다. 입력이 완료된 step은 title이 complete 상태로 표현되며 title 영역 우측에 사용자 입력 요약이 보여집니다.

Complete Step으로의 이동

입력이 완료된 step에 한하여 title을 클릭하면 해당 step으로 이동할 수 있습니다. 입력이 완료되지 않았거나 비활성화된 step으로는 title을 통해서 이동할 수 없습니다.