Steps

다단계 프로세스·마법사·주문 흐름을 단계별로 표시하는 컴포넌트입니다. ol 시맨틱 구조와 aria-current="step"으로 접근성을 지원합니다.

기본

가로형 단계 표시입니다. is-finished · is-active · is-wait로 진행 상태를 구분합니다.

제목만 표시하는 간결한 단계입니다. 설명이 없는 짧은 플로우에 적합합니다.

steps_vertical로 사이드바·폼 마법사에 적합한 세로 레이아웃을 적용합니다.

steps_dot으로 작은 원형 마커를 사용합니다. 밀도 높은 UI·모바일에 적합합니다.

steps_icon-style로 단계 유형을 아이콘으로 표시합니다. 완료 단계는 체크 아이콘으로 대체합니다.

steps_navigable과 steps_trigger로 완료된 단계를 클릭해 이전 단계로 돌아갈 수 있습니다. 대기 단계는 비활성화됩니다.

is-error로 실패·검증 오류 단계를 표시합니다. 오류 아이콘 또는 번호를 함께 사용합니다.

steps_align-center로 단계 제목과 설명을 가운데 정렬합니다. 대시보드·온보딩 헤더에 적합합니다.

steps_sm · steps_lg로 인디케이터와 텍스트 스케일을 조절합니다.

각 상태 클래스의 시각적 의미입니다. 현재 단계에는 aria-current="step"을 함께 지정합니다.

Prop	타입	기본값	설명
`title`	string	—	단계 제목 (필수)
`description`	string	—	단계 설명
`status`	'finished' \| 'active' \| 'wait' \| 'error'	wait	is-finished · is-active · is-wait · is-error
`index`	number	—	단계 번호 (자동 할당)
`children`	ReactNode	—	커스텀 항목 마크업 (navigable이 아닐 때)
`className`	string	—	루트 요소 추가 클래스
`ripple`	boolean	true	클릭 파장(ripple). true 시 data-ripple 활성 · false 비활성. 기본 활성

Prop / Children	설명
`children`	StepsItem 나열

Prop / Children	설명
`children`	커스텀 항목 마크업 (navigable이 아닐 때)

React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스	설명
`steps · steps_item · steps_head · steps_indicator`	루트·항목·헤드·인디케이터
`steps_title · steps_desc · steps_tail`	제목·설명·연결선
`steps_trigger`	navigable 모드 클릭 버튼
`steps_vertical · steps_dot · steps_icon-style · steps_navigable`	레이아웃·스타일
`steps_sm · steps_lg · steps_align-center`	크기·정렬
`is-finished · is-active · is-wait · is-error`	단계 상태
`aria-current="step"`	현재 단계
`data-ripple`	클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용
`data-ripple="false"`	해당 요소 ripple 비활성
`data-no-ripple`	하위 전체 ripple 비활성

토큰	기본값	설명
`--steps-indicator-size · --steps-gap`	—	인디케이터·간격
`--steps-title-size · --steps-desc-size`	—	타이포
`--steps-tail-color`	—	연결선 색
`--steps-pulse-duration`	1.5s	is-active 인디케이터 파장 애니메이션