KRDS React

단계 표시기 Step indicator ​

단계 표시기는 서비스 이용을 위해 사용자가 거쳐야 하는 일련의 단계를 시각화하여 표현한 것으로 진행 상태에 대한 피드백을 사용자에게 전달한다.

KRDS 가이드

기본 ​

tsx
import { StepIndicator } from '@krds.ui/react'

export default function StepIndicatorDemo() {
  return (
    <StepIndicator
      currentStep={1}
      steps={[
        { step: '1단계', title: '신청' },
        { step: '2단계', title: '서류 검토' }
      ]}
    />
  )
}

StepIndicator ​

Props

이름타입기본값설명
steps (필수)StepItem[]-단계 목록
currentStepnumber-1현재 활성 단계 인덱스 (0부터 시작)
currentStepTextstring현재단계스크린 리더용 현재 단계 텍스트
pageTitlestring-페이지 타이틀 텍스트